:not() 伪类的 CSS 特性

Posted 2023-03-06

【中文标题】:not() 伪类的 CSS 特性

【英文标题】：CSS specificity of :not() pseudo class

【发布时间】：2014-07-11 22:47:58

【问题描述】：

我有这个小 html：

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

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

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

但是在.ticker 类中我不想要这个边距。所以我想我可以使用：

#column .ticker ul 
    margin: 0;

也就是说，我知道第一个 CSS 选择器的特异性更高，因为有两个 :not() 伪类。但是为了获得更高的特异性，我必须将第二个 CSS sn-p 中的这两个 :not() 也附加到 ul 中。这样就可以了：

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

这不是傻吗？事实上，在两个 :not()pseudo 类中使用什么并不重要。他们只需要在那里。这对我来说没有任何意义。

这仅仅是 CSS3 中不完美的一部分，还是我的大脑还没有想到的解决方案？

在此处查看实际操作：http://jsfiddle.net/9BDw5/2/

【问题讨论】：

您已经正确计算了 CSS 特异性，因此您的 CSS（虽然可能有点尴尬）是好的。设计整体 CSS 方案可能有更好的方法，但它部分取决于相关网页的 HTML 结构。

是的 - 伪类和伪元素与其真实对应物具有相同的特异性。这不是 CSS 问题，而是 CSS 和标记设计/实践问题。

【参考方案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 个类选择器，而ul:not(.c):not(.d) 等于到 1 个类型选择器和 2 个类选择器。这使得它在从匹配中排除任意数量的类时非常有用。

【讨论】：

感谢您指出 CSS 规范中的注释，很好的解释和洞察力。

【参考方案2】：

如上所述，链接 :not() 伪类每次都会增加特异性。

This article explains it very nicely

【参考方案3】：

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

为您的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/

了解更多关于 CSS 特性的信息：http://www.w3.org/TR/css3-selectors/#specificity

【讨论】：

你甚至不需要添加额外的类——你可以简单地重复.ticker，这样你就有了#column .ticker.ticker ul，这是完全可以接受的，并且确实提供了相同的特异性奖励。 （我应该将其作为单独的答案发布，因为它与您的完全不同吗？）

@BoltClock 有趣的变化，请与 cmets 一起发布，这个技巧对于您可能无法添加额外类名的情况非常有用。