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

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

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

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

Answer 1

链接两个类选择器（中间没有空格）：

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

---

如果您仍然需要处理IE6等古老的浏览器，请注意，它不会正确读取链式类选择器：它只会读取最后一个类选择器（本例中为.bar ），而不管您列出的其他类。

为了说明其他浏览器和IE6如何解释这个，请考虑这个CSS：

 * { color: black; } .foo.bar { color: red; } 

支持的浏览器上的输出是：

 <div class="foo">Hello Foo</div> <!-- Not selected, black text [1] --> <div class="foo bar">Hello World</div> <!-- Selected, red text [2] --> <div class="bar">Hello Bar</div> <!-- Not selected, black text [3] --> 

IE6上的输出是：

 <div class="foo">Hello Foo</div> <!-- Not selected, black text [1] --> <div class="foo bar">Hello World</div> <!-- Selected, red text [2] --> <div class="bar">Hello Bar</div> <!-- Selected, red text [2] --> 

脚注：

• 支持的浏览器：
  1. 没有选择这个元素只有类foo 。
  2. 选择这个元素有两个类foo和bar 。
  3. 没有选择这个元素只有类bar 。
• IE6：
  1. 没有选择，因为这个元素没有类bar 。
  2. 被选为这个元素的是类bar ，而不管列出的其他类。