CSS:not()选择器排除元素详解

CSS中的`:not()`伪类选择器是一种简洁而强大的工具，能精准排除特定元素（如某类、某ID、某属性状态或其组合），让样式仅作用于其余符合条件的元素——例如为非禁用输入框、非激活菜单项或非必填表单字段统一设置视觉效果，显著提升代码可读性与维护效率；它支持类、ID、属性乃至多条件组合排除，虽不兼容IE8，但在现代浏览器中已广泛可用，是优化CSS逻辑与用户体验的实用利器。

在CSS中，:not 伪类选择器非常实用，它允许你选中不匹配指定条件的元素。通过 :not()，你可以轻松排除特定元素，让样式只作用于其余符合条件的元素。

基本语法

:not(选择器) 会选中所有不符合括号内选择器规则的元素。括号内可以是标签名、类、ID、属性选择器等。

• p:not(.special) —— 选中所有不是 .special 类的

  元素

• div:not(#header) —— 选中除了 ID 为 header 以外的所有 div
• input:not([disabled]) —— 选中所有未被禁用的输入框

排除特定类或ID

如果你希望对某一类元素应用样式，但想跳过某个特例，可以直接在 :not 中使用类或ID选择器。

• li:not(.active) { color: gray; } —— 所有列表项文字为灰色，但 .active 保持原样
• button:not(#submit-btn) { background: blue; } —— 除提交按钮外，其他按钮背景为蓝色

组合多个排除条件

:not 支持复合选择器，你可以排除同时满足多个条件的元素，但不能在一个 :not 外部链式写多个 :not（除非嵌套）。

• p:not(.warning, .error) —— 排除同时具有 .warning 或 .error 的段落（现代浏览器支持）
• div:not([hidden]):not(.skip) —— 选中既没有 hidden 属性也不含 skip 类的 div

实际应用场景

常见用途包括表单样式优化、导航菜单高亮、内容排版等。

input:not([required]) {
  opacity: 0.7;
  border: 1px dashed #ccc;
}

这样所有非必填输入框都会变得轻微透明并带虚线边框，提升用户体验。

基本上就这些。合理使用 :not 能让你的CSS更简洁灵活，关键是选对要排除的选择器。注意兼容性：IE8不支持，但现代项目通常没问题。

本篇关于《CSS:not()选择器排除元素详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！