CSS中:not()伪类可精准排除特定元素,支持类名、ID、属性及部分伪类选择器,但不可嵌套或含复杂复合选择器,IE9+兼容。

CSS 中可以通过 :not() 伪类选择器,精准排除特定元素,使其不被某条样式规则影响。关键在于把需要排除的条件写在 :not() 的括号内,并与目标选择器合理组合。
基础用法:排除指定类名的元素
比如想给所有 标签加边框,但跳过带 class="no-border" 的段落:
p:not(.no-border) { border: 1px solid #ccc; }
这样只有不包含 no-border 类的 会应用边框样式。
立即学习“前端免费学习笔记(深入)”;
支持多种选择器条件
:not() 括号里可以写类名、ID、属性选择器,甚至简单的关系选择器(注意:不能含伪类或复杂后代):
-
div:not(#header)—— 排除 ID 为header的a:not([href^="https://"])—— 排除以https://开头的链接button:not(:disabled)—— 仅作用于未禁用的按钮(:disabled是允许的伪类之一)组合使用提升精度
可与其他选择器连用,避免全局污染。例如只对文章正文内的标题生效,但排除广告区里的
:.article-content h2:not(.ad-banner h2) { color: #333; }
更稳妥写法是直接限定范围:
.article-content h2:not(.ad-title),前提是广告标题有明确类名。注意事项
-
:not()不能嵌套,如:not(:not(...))是无效的 - 括号内不能写完整复合选择器(如
.nav a),但支持单个简单选择器或带属性/伪类的单元素表达式 - 浏览器兼容性良好,IE9+ 均支持(IE8 及以下不支持)










