是否有一种方法可以根据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类的成员的事实?
当前回答
链接两个类选择器(中间没有空格):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
如果您仍然必须使用Internet Explorer 6这样的老式浏览器，请注意它不能正确读取链式类选择器:它只读取最后一个类选择器(。在这种情况下，Bar)而不是，不管你列出了其他什么类。
为了说明其他浏览器和IE6是如何解释这一点的，请看下面的代码片段:
* { 颜色:黑色; ｝ . foo。酒吧{ 颜色:红色; ｝ < div class = " foo " > 1。你好Foo < / div > <div class="foo bar">Hello World < / div > < div class = "栏”> 3。你好棒< / div >
页面看起来是这样的:
在受支持的浏览器上: 没有被选中，因为这个元素只有类foo。 选中此元素时，该元素同时具有类foo和bar。 未选中，因为此元素只有类栏。 在Internet Explorer 6下: 未选中是因为该元素没有类栏。 选择此元素，因为该元素具有类栏，而不管列出的任何其他类。 选择此元素是因为该元素具有类bar。
其他回答
萨斯:
.foo {
/* Styles with class "foo" */
&.bar {
/* Styles with class "foo bar" */
}
}
参见https://stackoverflow.com/a/49401539/7470360
链接两个类选择器(中间没有空格):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
如果您仍然必须使用Internet Explorer 6这样的老式浏览器，请注意它不能正确读取链式类选择器:它只读取最后一个类选择器(。在这种情况下，Bar)而不是，不管你列出了其他什么类。
为了说明其他浏览器和IE6是如何解释这一点的，请看下面的代码片段:
* { 颜色:黑色; ｝ . foo。酒吧{ 颜色:红色; ｝ < div class = " foo " > 1。你好Foo < / div > <div class="foo bar">Hello World < / div > < div class = "栏”> 3。你好棒< / div >
页面看起来是这样的:
在受支持的浏览器上: 没有被选中，因为这个元素只有类foo。 选中此元素时，该元素同时具有类foo和bar。 未选中，因为此元素只有类栏。 在Internet Explorer 6下: 未选中是因为该元素没有类栏。 选择此元素，因为该元素具有类栏，而不管列出的任何其他类。 选择此元素是因为该元素具有类bar。
