Question

请参阅以下代码

HTML：

<a href="#" class="red">AA</a>
<a href="#" class="navitem dropdown-toggle">BB</a>
<a href="#" class="user-nav">CC</a>
<a href="#">DD</a>

我想应用除两个锚之外的颜色，其中包含以下类“navitem dropdown-toggle”和“user-nav”

的CSS：

:not(a[class="navitem dropdown-toggle"]), :not(a[class="user-nav"]) {
    color:#C71444 !important;
    text-decoration:none !important;
}

但颜色不适用于第一个和最后一个锚标记。没有任何工作。为什么？

小提琴：http://jsfiddle.net/QymZq/1/

谢谢，

希瓦

Answer 1

不完全相同，但它可以完成工作

a:not(.navitem):not(.user-nav):not(.dropdown-toggle) {
    color:#C71444 !important;
    text-decoration:none !important;
}

但是尽量避免:not，因为它是性能杀手。

DEMO HERE

Answer 2

首先，您的语法无效：来自the specification

否定伪类，不是（X），是一个带有简单选择器的功能符号

和

简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

所以，如果我们只是修改你的语法，我们会得到：

:not(a):not([class="navitem dropdown-toggle"]), :not(a):not([class="user-nav"]) {
    color:#C71444 !important;
    text-decoration:none !important;
}

但是，您要希望它匹配a元素。

a:not([class="navitem dropdown-toggle"]), a:not([class="user-nav"]) {
    color:#C71444 !important;
    text-decoration:none !important;
}

但是，即使这样，如果a:not([class="navitem dropdown-toggle"]) 或，如果某些内容为a:not([class="navitem dropdown-toggle"])并且这意味着一切（因为这两个选择器无法应用于同一元素），则规则集将适用）。

看起来你真的想要：

a:not([class="navitem dropdown-toggle"]):not([class="user-nav"]) {
    color:green !important;
    text-decoration:none !important;
}

：css中的选择器不工作

2 个答案: