: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) 这种链式写法还是更稳妥的选择。我通常会优先考虑兼容性，除非项目明确要求只支持最新标准。
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情 
掌握: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()伪类：排除特定元素的匹配方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1101701.html
微信扫一扫 
支付宝扫一扫 
