css - 有没有办法在 CSS 中查询具有多个类的元素？

Question

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

例如：

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

我想同时为所有具有“主要”和“次要”类的跨度设置样式。

Answer 1

以下应该可以解决问题：

span.major.minor { color: red; }

请注意，对于 Internet Explorer 6，您必须小心 - 它只会读取选择器的最后一个类。例如，它将错误地将上述规则应用于以下内容：

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

Answer 2

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

.major.minor { ... }

但是。它在 IE6 中不起作用（或者在Quirks Mode中的 IE7 中）。当你在同一个元素上指定多个类选择器时，IE 只关注最后一个。所以上面的选择器会匹配任何带有class="minor".

解决方法包括将多个类复制为一个类：

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

或者，如果有备用元件使其清洁，则收容：

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