CSS选择器，应用于具有两个类的元素

是否有一种方法可以根据class属性被设置为两个特定类的值来选择CSS元素。例如，假设我有3个div:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

我可以写什么CSS来选择列表中的第二个元素，基于它是foo和bar类的成员的事实?

379174 次浏览
小开
最佳答案

链接两个类选择器(中间没有空格):

.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}

如果您仍然必须使用Internet Explorer 6这样的老式浏览器，请注意它不能正确读取链式类选择器:它只读取最后的类选择器(在本例中为.bar)，而不管您列出了其他什么类。

为了说明其他浏览器和IE6是如何解释这一点的，请看下面的代码片段:

* {
color: black;
}


.foo.bar {
color: red;
}
<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

页面看起来是这样的:

  • 在支持的浏览器上:

    1. 因为这个元素只有类foo。
    2. 作为元素的选择有foo和bar两个类。
    3. 因为这个元素只有类bar。

  • 在Internet Explorer 6中:

    1. 不选择因为这个元素没有类bar。
    2. 选择，因为这个元素的类是bar，而不考虑列出的任何其他类。
    3. 因为这个元素的类是bar。
小开

萨斯:

.foo {
/* Styles with class "foo" */
&.bar {
/* Styles with class "foo bar" */
}
}

看到# EYZ0


提交答案