: not伪类选择器可用于排除特定元素以简化CSS，如nav a:not(:last-child)去除导航末项边框、input:not([type="submit"])跳过提交按钮等，提升样式灵活性与可维护性。
在CSS中，:not 伪类选择器是一个非常实用的工具，它允许我们为“不符合特定条件”的元素应用样式。换句话说，它可以排除某些元素，让样式规则更灵活、更具针对性。特别是在需要统一设置样式但又要跳过某个或某类特殊元素时，:not() 能显著减少冗余代码。
:not 选择器基本语法
它的写法很简单，在冒号后跟 not，括号内填写要排除的选择器：
:not(selector)例如：
- p:not(.highlight) —— 选中所有不是 .highlight 类的段落
- input:not([disabled]) —— 选中所有未被禁用的输入框
- li:not(:last-child) —— 选中除最后一个外的所有列表项
实际应用场景：排除特定样式
在开发过程中，经常会遇到需要批量设置样式但排除个别例外的情况。以下是几个典型实践：
立即学习“前端免费学习笔记（深入）”；
1. 导航菜单中排除最后一项的边框
常见导航栏每个菜单项之间用右分割线隔开，但最后一项不需要。使用 :not 可以轻松实现：
nav a:not(:last-child) {border-right: 1px solid #ccc;
}
这样所有链接除了最后一个都会显示右边框，简洁又高效。
2. 表单中忽略特定类型的输入框
如果想为所有文本输入框设置统一宽度，但跳过提交按钮或复选框：
input:not([type="submit"]):not([type="checkbox"]) {width: 100%;
padding: 8px;
}
这样避免了对按钮或勾选项误设样式。
3. 内容区域排除标题的间距
文章内容中的段落通常有上下边距，但可能不希望第一个段落紧接标题时再加 margin-top：
.article p:not(:first-child) {margin-top: 1em;
}
或者更精确地排除紧跟 h2 后的第一个 p（需结合相邻兄弟选择器）：
h2 + p {margin-top: 0;
}
p {
margin-top: 1em;
}
虽然这里没直接用 :not，但它常与这类逻辑配合使用。
注意事项与兼容性
:not 选择器功能强大，但也有些细节需要注意：
- 括号内只能是一个简单选择器，不能嵌套另一个 :not 或复杂表达式（如 :not(p > a) 是无效的）
- 支持链式排除，比如 :not(.a):not(.b)
- 现代浏览器普遍支持，IE 从 IE9 开始支持单个 :not，但功能有限，IE8 不支持
- 性能上几乎没有影响，可放心用于生产环境
基本上就这些。合理使用 :not() 能让CSS更简洁、逻辑更清晰，特别是在处理“大多数适用，个别除外”的场景时特别有用。掌握它，能少写很多覆盖样式和额外类名。
