Question

我有这个小HTML：

<div id="column">
    <div class="ticker">
        <ul>
            <li>Item 1</li>
        </ul>
    </div>
</div>

对于ul类之外的.ticker元素，但#column id内部存在此CSS：

#column ul:not(.a):not(.b) {
    margin: 1em;
}

但在.ticker课程内我不想要这个边距。所以我想我可以使用：

#column .ticker ul {
    margin: 0;
}

那就是说，我知道第一个CSS选择器的特异性更高，因为有两个:not()伪类。但为了获得更高的特异性，我不得不将第二个CSS片段中的这两个:not()附加到ul。这样可行：

#column .ticker ul:not(.c):not(.d) {
    margin: 0;
}

这不是傻瓜吗？实际上，在两个:not()伪类中使用的内容并不重要。他们只需要在那里。这对我没有任何意义。

这仅仅是CSS3的一部分并不完美，还是我的大脑没有提出解决方案呢？

在此处查看此行动：http://jsfiddle.net/9BDw5/2/

Answer 1

不仅仅是你;这确实是CSS概念中特异性的基本缺陷之一。

同样有效的更简单的解决方案是重复您的.ticker类选择器，以便您拥有：

#column .ticker.ticker ul {
    margin: 0;
}

这样，您不必为了增加选择器的特异性而修改元素以添加额外的类。

规范verifies this：

注意：允许重复出现相同的简单选择器，并提高特异性。

另一方面，请记住，:not()伪类的特殊性（严格定义在规范的同一部分中）与其参数的特性相同。因此:not(#id)和#id具有相同的特异性，同样适用于:not(E):not(.a)和E.a。 :not部分根本不计算，甚至不算作伪类。

这种特异性限制将在Selectors 4中解决，它会增强:not()接受以逗号分隔的选择器列表。包含选择器列表的:not()的特异性将是列表中最具体的选择器的特异性，因此ul:not(.c, .d)的特异性等于1个类型选择器和1个类选择器，与{{ 1}}等于1类型选择器和2类选择器。这使得从匹配中排除任意数量的类非常有用。

Answer 2

这是另一种更清洁的方法。

为您的div.ticker元素添加虚构的类名称：

<div id="column">
    <ul>
        <li>Outside Item 1</li>
    </ul>
    <div class="ticker extra-tag">
        <ul>
            <li>Item 1</li>
        </ul>
    </div>
</div>

并按如下方式修改CSS：

#column ul:not(.a):not(.b) {
    margin-left: 1em;
}

#column .ticker.extra-tag ul {
    margin-left: 0;
}

因此，第一条规则的特异性为1-1-2，第二条规则为1-1-2。

两个:not()计为两个类，所以你需要至少有两个类第二条规则，我使用虚构的类名.extra-tag实现。

虚构的类可能比添加虚拟类更有效额外:not()伪类。

请参阅演示：http://jsfiddle.net/audetwebdesign/7beNx/

在http://www.w3.org/TR/css3-selectors/#specificity

了解有关CSS特异性的更多信息

Answer 3

如上所述，链接：not（）伪类每次增加一个特异性。

This article explains it very nicely

CSS特性：not（）伪类

3 个答案: