CSS 多类选择答案

【问题标题】：CSS multiple class selectionCSS 多类选择
【发布时间】：2012-03-27 07:08:10
【问题描述】：

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

【问题讨论】：

到目前为止您尝试过什么？我不明白你为什么会被困在这上面。 .b{display:none} 不是你想要的？
Can you target an element with CSS only if 2 classes are present? 的可能重复项
抱歉有错误。我想隐藏第二个。更正了问题
所以你什么都没试过，你已经没有想法了？嗯...
有什么原因不能将“c”类添加到第二个 DIV 并通过它隐藏它吗？

标签： selection css

【解决方案1】：

您可以隐藏两者，然后显示同时具有 a 和 b 的类

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

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

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

这说明了任何与类 a 直接跟随在类 a 和 b 的任何东西应该被隐藏。

【讨论】：

正如对问题的评论所写，第一个 div 从来没有相同的可见性 - 有时它是绝对的，有时是相对的，它不依赖于我。 css 中是否有类似“不”的语句？
@burtek：请注意，关于 SO 的问题（和答案）应该是独立的。不必为了理解而阅读 cmets。请在问题中填写所有必要信息。

【解决方案2】：

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}

【讨论】：

【解决方案3】：

很容易。试试这个

.b {display:none;}

【讨论】：

【解决方案4】：

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

.b { display: none; }

如果您要求只隐藏具有类a的项目而同时具有类b，您可以通过加入两个类选择器来使用多类选择器（无空白）：

.a.b { display: none; }

【讨论】：

【解决方案5】：

您的意思是，有时可见性是绝对的还是相对的？可见性只能在 div 上隐藏或可见。

这是您更新问题所需的内容

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

【讨论】：

【解决方案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 的特异性太低了。

【讨论】：