CSS:not()伪类全面解析

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS :not()伪类使用详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

:not()伪类在CSS中用于排除特定元素，其语法为选择器:not(要排除的选择器)。例如，div:not(.special)选中除class="special"外的所有div；li:not(:first-child)选中除第一个外的所有列表项；button:not(:disabled)选中除禁用状态外的所有按钮。:not()支持排除多个元素的方式取决于CSS版本：CSS3中需链式写法如div:not(.class1):not(.class2)，而CSS4允许直接传入列表如div:not(.class1, .class2)。特异性方面，:not()本身不增加权重，但其参数选择器的特异性会被计算。例如，div:not(.class)的特异性为(0,1,0)，与普通div选择器(0,0,1)比较时前者优先。在响应式设计中，:not()可用于隐藏特定屏幕下的元素或设置全局样式并排除例外，如*:not(iframe):not(.third-party-root)设置box-sizing。此外，它还能清晰表达样式意图，简化复杂布局维护，如导航菜单分隔符的设置。兼容性考虑下，目前链式写法更为稳妥。

:not()伪类在CSS里，就是个“排除法”工具，它能让你选中所有不符合某个条件的元素。简单说，就是“除了它，别的都行”。这在很多时候特别好用，能省不少事，让你的CSS代码更清晰。

说起:not()，我个人觉得它简直是CSS选择器家族里的一股清流。你是不是也遇到过这种情况：想给一组元素设置样式，但偏偏其中一两个是例外？过去我们可能得写一堆额外的规则去覆盖，或者给那几个例外单独加类名。:not()出现后，这个问题就迎刃而解了。

它的基本语法是 选择器:not(要排除的选择器)。比如，你想选中所有的 div 元素，但不想选中那些带有 class="special" 的 div。你就可以写成 div:not(.special) { /* 样式 */ }。

再来个例子，假设你有一系列列表项

都有一个左边距。

li:not(:first-child) {
    margin-left: 10px;
}

这个是不是就挺直观的？或者，你有一堆按钮，但某个禁用状态的按钮 button:disabled 不想应用通用样式：

button:not(:disabled) {
    background-color: blue;
    color: white;
    padding: 8px 15px;
}

你看，它把“反向选择”这个概念表达得非常清晰。在我看来，它就是那种能让你的CSS代码更“语义化”的工具，你一眼就能看出设计意图，而不是靠一堆覆盖规则去猜。

:not()伪类能否排除多个元素？深入理解其参数列表

这个问题其实挺常见的，很多人刚接触:not()的时候会想，我能不能一次性排除好几种情况？答案是：这取决于你使用的CSS版本。在CSS Selectors Level 3中，:not()只能接受一个简单的选择器作为参数。也就是说，div:not(.class1, .class2) 这种写法是不合法的。你得写成 div:not(.class1):not(.class2)。

但到了CSS Selectors Level 4，:not()的能力就增强了，它现在可以接受一个选择器列表（selector list）作为参数。这意味着 div:not(.class1, .class2) 这样的语法现在是有效的了。它会选中所有既没有 .class1 也没有 .class2 的 div。

举个例子，假设你想选中所有 标签，但要排除那些链接到外部网站（[target="_blank"]）或者有 download 属性的链接： CSS Level 3 时代：

a:not([target="_blank"]):not([download]) {
    color: #337ab7; /* 普通链接颜色 */
}

CSS Level 4 时代（如果浏览器支持）：

a:not([target="_blank"], [download]) {
    color: #337ab7;
}

虽然Level 4的语法更简洁，但考虑到浏览器兼容性，目前在实际项目中，:not(.class1):not(.class2) 这种链式写法还是更稳妥的选择。我通常会优先考虑兼容性，除非项目明确要求只支持最新标准。

掌握:not()伪类与CSS特异性（Specificity）的交互逻辑

关于特异性，这玩意儿在CSS里一直是个让人头疼又不得不面对的话题。:not()伪类本身不增加任何特异性值。它所包含的选择器的特异性会被计算在内，并作为:not()伪类整体的特异性。

例如：

• div:not(.class) 的特异性是 (0,1,0) (因为 .class 是一个类选择器)。
• p:not(#id) 的特异性是 (1,0,0) (因为 #id 是一个ID选择器)。
• a:not([href]) 的特异性是 (0,1,0) (因为 [href] 是一个属性选择器)。

这意味着，如果你有一个规则是 div { color: red; }，另一个是 div:not(.special) { color: blue; }，那么没有 .special 类的 div 会是蓝色，因为 div:not(.special) 的特异性（0,1,0）高于 div（0,0,1）。

但如果规则是 div.special { color: green; } 和 div:not(.special) { color: blue; }，那么带有 .special 类的 div 会是绿色，因为它 .special 类选择器的特异性 (0,1,0) 和 div 元素选择器的特异性 (0,0,1) 结合起来是 (0,1,1)，而 div:not(.special) 的特异性是 (0,1,0)。

这个细节很重要，它能解释为什么有些样式规则看起来应该生效却没生效，或者反之。理解特异性如何与:not()协同工作，能让你在调试CSS时少走很多弯路。

:not()伪类在响应式设计与复杂布局中的应用技巧

在响应式设计里，:not()伪类也能发挥不小的作用。想象一下，你可能希望在小屏幕上隐藏除了某个特定元素之外的所有侧边栏项，或者在桌面端，给所有图片设置最大宽度，但某些特定尺寸的图片除外。

一个常见的场景是，我们可能想给所有元素一个默认的 box-sizing: border-box;，但某些第三方组件或者特定的iframe不希望被影响。

/* 全局设置，但排除特定的iframe和第三方组件根元素 */
*:not(iframe):not(.third-party-root) {
    box-sizing: border-box;
}

这比写一堆针对性的 box-sizing: content-box; 覆盖规则要优雅得多。

再比如，在构建导航菜单时，你可能希望所有菜单项之间都有一个分隔符，但最后一个菜单项不需要。 HTML结构可能是这样：

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

CSS：

/* 给除了最后一个li之外的所有li添加右边框作为分隔符 */
li:not(:last-child) {
    border-right: 1px solid #ccc;
    padding-right: 10px;
    margin-right: 10px;
}

这比使用 + 相邻兄弟选择器或者 li:last-child { border-right: none; } 的覆盖方式，在某些情况下逻辑上更清晰，也更容易维护。尤其当你需要排除的元素规则比较复杂时，:not()能让你的意图表达得更直接。我个人觉得，它就是那种能让你代码“说人话”的工具。

到这里，我们也就讲完了《CSS:not()伪类全面解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！