CSS:not()伪类全面解析

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结构可能是这样：

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学习网公众号！