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 及以下不支持)