:not()伪类选择器用于选中不匹配特定条件的元素，简化样式逻辑。它可排除指定元素，在复杂布局中非常有效，提升CSS可维护性与灵活性。
在CSS中，:not() 伪类选择器是一个非常实用的工具，它允许你选中**不匹配特定条件的元素**，从而简化样式逻辑，特别是在处理复杂布局或需要排除某些元素时尤为有效。下面详细介绍如何正确使用 :not()) 来排除特定类型的元素，并应用于复杂的样式场景。
基本语法与常见用法
:not(选择器) 接受一个参数，表示“除了这个选择器匹配的元素之外的所有元素”。它可以排除标签名、类、ID、属性甚至其他伪类。
-
p:not(.highlight)— 选中所有不是.highlight类的段落 -
input:not([disabled])— 选中所有未被禁用的输入框 -
li:not(:last-child)— 选中除最后一个以外的所有列表项
在复杂布局中排除特定元素
当构建网格或卡片布局时，常常需要对大部分元素应用统一样式，但跳过某些特殊项。使用 :not() 可避免额外添加类或重复写样式。
.card:not(.ad) {
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.card:not(.ad):hover {
transform: translateY(-2px);
}
这样只有非广告卡片具备悬停动效和边框，广告卡片保持静态展示。
立即学习“前端免费学习笔记（深入）”；
组合多个条件进行精确排除
CSS Selectors Level 3 允许 :not() 内部使用简单选择器，而 Level 4 支持更复杂的表达式（现代浏览器已广泛支持）。
-
button:not(.primary):not(:disabled)— 非主要按钮且未禁用的按钮 -
nav a:not([href^="#"])— 导航中不指向页面锚点的链接 -
img:not([alt="logo"])— 所有非 logo 图片，可用于自动添加装饰样式
性能与兼容性注意事项
:not() 性能良好，但应避免过度嵌套或使用过于复杂的选择器。注意以下几点：
- 老版本IE不支持
:not()（IE8及以下），需考虑兼容方案 - 不能在
:not()中使用伪元素（如::before） - 尽量使用类或属性选择器，而非深层结构依赖，以提升渲染效率
基本上就这些。合理利用 :not() 能让CSS更简洁、可维护性更高，尤其适合排除干扰项、批量控制样式表现。掌握它的组合方式，能在复杂界面中实现灵活而精准的样式控制。
