具有 a 类但不具有 b 类的 CSS 选择器答案

【问题标题】：CSS selector with class a but not class b具有 a 类但不具有 b 类的 CSS 选择器
【发布时间】：2012-05-27 18:06:13
【问题描述】：

我尝试了各种方法，但我觉得我太复杂了，甚至设法让 chrome 挂在我的选择器上。我确信有一个简单的方法可以做到这一点

选择classa，但仅当没有classb 并忽略它的最后一个实例

<div class="container">
    <div class="classa classb"></div> <!-- Dont Select -->
    <div class="classa"></div>  <!-- Select -->
    <div class="classa"></div>  <!-- Dont select last instance -->
</div>

【问题讨论】：

标签： css css-selectors

【解决方案1】：

我相信您可以通过 CSS3 使用所选的 :not() 来做到这一点（例如 here）

div.classa:not(.classb):not(:last-child) {}

但是，如您所知，支持此功能的浏览器并不多，因此 Javascript 可能是一种更简单的方法...

【讨论】：

另外，如果不是最后一个孩子，您将无法排除最后一个 .classa。见stackoverflow.com/questions/10230416/…
是的，这是我一直在测试的问题

【解决方案2】：

.classa:not(.classb):not(:last-child) {
    /* rules */
}

已在 Firefox 12、Chrome 19、Safari 5 和 Opera 10 上测试。不幸的是，它不适用于（...猜猜谁？）IE。

【讨论】：

因为你的IE还没有升级。
我在 IE 9 上测试过 - 不起作用。即使它有效，大多数人仍然使用旧版本...
确保您在标准模式下进行测试。 IE9 完全支持这些选择器，但仅限于标准模式。
是的，你是对的。我在没有<!doctype html> 的情况下进行测试。现在可以使用了

【解决方案3】：

试试：

.classa:not(.classb):first-child {
    background: red;
}

这在 IE 7 或 8 中不起作用。

【讨论】：

这是错误的，因为第一个孩子是.classa.classb。

【解决方案4】：

与CSS3 pseudo classes:

.classa:not(:last-child):not(.classb) {
  // some rules...
}

【讨论】：