具有class a但不具有class b的CSS选择器

Question

具有class a但不具有class b的CSS选择器

24

我尝试了各种方法，但我觉得我的选择器变得太复杂了，甚至让谷歌浏览器无法响应。我相信有一个简单的方法来做到这一点。

选择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>

- Tarang

4个回答

6

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

已在Firefox 12、Chrome 19、Safari 5和Opera 10上进行了测试。遗憾的是，它不适用于IE（可以猜猜为什么？）。

- Simone

因为您还没有升级您的IE。 - BoltClock

我在IE 9上进行了测试 - 不起作用。即使它能够工作，大多数人仍然使用旧版本... - Simone

确保您在标准模式下进行测试。IE9 在标准模式下完全支持这些选择器。 - BoltClock

1

是的，你说得对。我没有使用 <!doctype html> 进行测试。现在它可以工作了。 - Simone

1

尝试：

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

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

- Kai Sellgren

这是错误的，因为第一个子元素是.classa.classb。 - BoltClock

0

使用CSS3伪类：

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

- ldiqual

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LeeR · Accepted Answer

我相信你可以使用CSS3的:not()选择器来实现这个功能（例如这里的示例）

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

然而，正如你所知，不是所有的浏览器都支持这个功能，因此使用Javascript可能是一种更简单的方式...