Question

有一个包含HTML片段的网页：<div class="a b"></div><div class="a"></div>。如何用CSS隐藏第二个 div ，让第一个可见？请注意，我不能添加任何其他类，以及第一个div更改的可见性（有时是相对的，有时是绝对的），并且它不依赖于我。

Answer 1

您可以隐藏这两个，然后显示同时具有a和b

类的那个

.a {display: none;}
.a.b {display: block;}

如果标记不会改变，您可以使用以下内容隐藏第二个div：

.a.b + .a {display:none;}

这表示类a的所有内容都应该隐藏在a和b类的任何内容之后。

Answer 2

很简单。试试这个

.b {display:none;}

Answer 3

div.a.b{display:none} /*take note, no spaces between .a and .b to signify that the div has both*/

或者，因为第一个包含b

div.b{display:none}

Answer 4

只需为b类创建一个选择器：

.b { display: none; }

如果您要求只有具有类a的项目在具有类b时才应该被隐藏，则可以通过连接两个类选择器（无空白）来使用多类选择器：

.a.b { display: none; }

Answer 5

您的意思是什么时候能见度是绝对的还是相对的？只能在div上隐藏或显示可见性。

以下是您更新的问题所需的内容

.a { display: hidden; } 
.b { display: inline !important; }

Answer 6

CSS3定义了negation pseudo-class：

.a:not(.b) {
    display: none;
}

但是，它只获得了IE 9的支持，因此当前典型的cross-browser solution是为所有元素（包括您不想匹配的元素）设置属性，然后创建另一个元素具有更多specific selector的规则可恢复原始样式。这在IE 6及更早版本中仍然存在问题，因为它们只考虑使用单个元素的multiple classes时的最后一个类。

.a {
    display: none;
}
.a.b { /* IE6 will treat selector as '.b' */
    display: block;
}

请注意，如果已有规则使用更具体的选择器与您不想触摸的元素匹配，或者样式设置为inline（不应在脚本操作之外完成）页面），您不需要添加第二条规则，因为.a具有如此低的特异性。

CSS多类选择

6 个答案: