：在CSS不工作

请参考下面的代码不会选择器：在CSS不工作

HTML：

我想申请的颜色，除了它包含以下类“navitem下拉菜单，切换”两个锚点和“用户导航”

CSS：

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

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

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

感谢，

湿婆

来源

2014-02-07 SivaRajini

http://jigsaw.w3.org/css-validator/validator – Quentin

同时使用那些'：not'选择其实选择**无**的因为他们都符合两个条件之一。其中3个不是'.user-nav'，3个不是'navitem dropdown-toggle'。 **你究竟想要做什么？** –

我需要选择其他不包含指定类的锚。查看由Quentin更新的答案 – SivaRajini

一开始，你的语法是无效的：从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; 
}

来源

2014-02-07 13:27:56 Quentin

精美的解释和确切的，它应该被接受。 –

非常感谢，它确实有帮助 – SivaRajini

不完全一样，但它可能做的工作

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

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

DEMO HERE

来源

2014-02-07 13:26:28

我正在写一个答案，但是我只是给你的人添加一个演示。 – Ruddy

我结束了完全相同的规则，并打算发布它，但你第一次:) – zvona

@ michael感谢您的快速解决方案 – SivaRajini

：在CSS不工作

回答

相关问题