CSS：使用多个属性

Question

我可以使用多个属性将样式应用于元素吗？

例如： 我想将display:block规则应用于类aaa的div 除非它包含在一个bbb

类的div中

所以我试过

[class~="aaa"] { display:none; }

[class~="bbb"][class~=“aaa"] { display:block; } 

但这不起作用。有没有正确的方法？

Answer 1

对于课程，您不应该使用attribute selectors。你需要的只是班级选择器。

所以，而不是：

[class~="aaa"] { display:none; }

你应该

div.aaa { display:none; }

此外，您的descendant selector应该有空格，因此您的第二条规则是（不是100％确定确切的语法）：

div.bbb div.aaa { display:block; }

Answer 2

这在Opera中对我有用。 （你使用的浏览器是什么？）

<强> CSS

[class~="aaa"] { color:red; }
[class~="bbb"] [class~="aaa"] { color:green } 

哪个（应该）在逻辑上等同于：

.aaa { color:red; }
.bbb .aaa { color:green } 

<强> HTML

<div class='aaa'>foo</div>
<div class='bbb'>
    <div class='aaa'>foo2</div>
</div>

请注意：

• （我的代码）第二个CSS行中两个选择器之间的空格。
• （您的密码）您的第5次双重报价，不是“正确的”双重报价。

示例： http://jsbin.com/hocir/1/edit?html,css,output