在CSS中，有没有一种方法可以查询具有多个类的元素？

Question

如何查询同时具有两个类的元素？

例如：

<div><span class="major minor">Test</span></div>

我想同时为所有拥有“major”和“minor”类的span元素添加样式。

- vava

Answer 1

以下代码可以解决这个问题：

span.major.minor { color: red; }

请注意，在使用Internet Explorer 6时，您需要小心处理这个问题 - 它只会读取选择器的最后一个类。例如，它会错误地将上面的规则应用于以下内容：

<span class="minor">Test</span>

- Simon Lieschke

---

span.major.minor != span.minor.major - Ian G

@in.spite，你能详细说明一下吗？ - David Kolar

Answer 2

使用类别限定符两次，例如：

.major.minor { ... }

但是，在IE6中（或者在怪异模式下的IE7），它不能正常工作。当你在同一个元素上指定多个类选择器时，IE只关注最后一个。因此，上面的选择器会匹配任何具有class="minor"的元素。

解决方法包括将多个类重复为单个类：

.major-minor { ... }
<span class="major minor major-minor">...</span>

或者，如果有多余的元素可用于使其清晰，则使用容器：

.major .minor { ... }
<span class="major"><span class="minor">...</span></span>

- bobince