仅当存在 2 个类时，您可以使用 CSS 定位元素吗？答案

【问题标题】：Can you target an element with CSS only if 2 classes are present?仅当存在 2 个类时，您可以使用 CSS 定位元素吗？
【发布时间】：2010-10-13 01:31:27
【问题描述】：

您可能已经知道，元素上可能有多个类，以空格分隔。

<div class="content main"></div>

使用 CSS，您可以使用 .content 或 .main 定位 div。如果且仅当两个类都存在时，有没有办法定位它？

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

我将使用哪个 CSS 选择器仅获取第一个 div（假设我不能使用 .content:first-child 或类似的）？

【问题讨论】：

【解决方案1】：

是的，只需将它们连接起来：.content.main。见CSS class selector。

但请注意，最高版本 6 的 Internet Explorer 不支持多个类选择器，仅支持最后一个类名。

【讨论】：

【解决方案2】：

只是为了它（我真的不建议你这样做），还有另一种方法：

.content[class~="main"] {}

或者：

.main[class~="content"] {}

E[foo~="warning"] 匹配任何“foo”属性值为 空格分隔值的列表，其中一个值完全等于 “警告”

由于IE6不支持多类，我们不能使用.content.main，但是有一些像IE-7.js这样的javascript库启用了属性选择器，但是在启用时似乎仍然失败来到多个班级。我已经在 IE6 中使用启用属性选择器的 javascript 测试了这个解决方法，它很丑陋，但它可以工作。

我还没有找到使 IE6 支持多个类选择器的脚本，但我找到了许多启用属性选择器的脚本。如果有人知道一个可行的，请在 cmets 中给我留言，这样我就可以摆脱这种解决方法。

【讨论】：