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

Question

有没有一种方法可以根据将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类中的一员？

Answer 1

链中类选择（两者之间没有空格）：

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

---

如果你仍然不得不面对古老的浏览器IE6一样，要知道，它不能正确读取链接的类选择：它只会读最后类选择器（.bar在这种情况下），而不管您列出的其他类。

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

* { 
    color: black; 
} 

.foo.bar { 
    color: red; 
} 

上支持的浏览器的输出是：在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>  <!-- Not selected, black text [3] --> 

输出是：

<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，无论列出的任何其他类如何。