:not() 伪类的 CSS 特性

Question

我有这个小 HTML：

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

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

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

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

#column .ticker ul {
    margin: 0;
}

也就是说，我知道第一个 CSS 选择器的特异性更高，因为有两个:not()伪类。但是为了获得更高的特异性，我也必须将:not()第二个 CSS 片段中的这两个附加到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;
}

这样你就不必为了增加选择器的特异性而修改你的元素来添加一个额外的类。

规范验证了这一点：

注意：允许重复出现相同的简单选择器，这会增加特异性。

附带说明一下，请记住，:not()伪类的特异性（在规范的同一部分）被严格定义为等于其参数的特异性。所以:not(#id)和#id具有相同的特异性，对于:not(E):not(.a)和也是如此E.a。该:not部分根本不算数，甚至不能算作伪类。

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