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

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

.foo.bar {    }

如果仍然需要处理IE6之类的古老浏览器，请注意，它无法正确读取链接的类选择器：无论您列出什么其他类，它都只会读取 最后一个
类选择器（

.bar

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

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

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

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

IE6上的输出是：

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

脚注：

• 支持的浏览器：

  1. 未选择， 因为此元素仅具有class

     foo

     。
  2. 选择 作为该元素具有类

     foo

     和

     bar

     。
  3. 未选择， 因为此元素仅具有class

     bar

     。

• IE6：

  1. 未选择， 因为此元素没有class

     bar

     。
  2. 被选中 为该元素具有class

     bar

     ，而与列出的任何其他类无关。