:not()仅支持简单选择器，禁用复合/后代选择器；CSS4扩展支持多参数如:not(.a,.b)；IE全系不支持；不可修饰伪元素；优先级等同内部选择器；复杂逻辑建议用JS或语义化class替代。
not伪类的基本写法和限制
:not() 只接受简单选择器，不能写复合选择器或后代选择器。比如 :not(.a .b)、:not(div p) 是非法的，浏览器会直接忽略整条规则。
合法写法包括：:not(.active)、:not([disabled])、:not(:hover)、:not(:nth-child(2))。注意 :not(:checked) 可以，但 :not(input:checked) 就不行——因为加了类型选择器后变成了复合选择器。
- Chrome 60+、Firefox 52+、Safari 9.1+ 支持 CSS Level 4 的扩展语法（如
:not(.a, .b)），但旧版只支持单个简单选择器 - IE 完全不支持
:not()（包括 IE11） - 用 Webpack 或 PostCSS 时，autoprefixer 默认不为
:not()加前缀，因为它没有历史兼容前缀
常见误用：想排除子元素却写了错误结构
比如想让「所有 p 元素，除了被 .sidebar 包裹的」生效，有人会写：
body p:not(.sidebar p) { color: red; }
这是无效的——:not() 里不能出现空格。正确思路是「正向限定范围」：先选中目标容器，再排除其中的 p。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：用上下文隔离，例如
main p { color: red; }+.sidebar p { color: initial; } - ✅ 或者用属性标记：
p:not([data-exclude])，然后在 HTML 中给需要排除的加上data-exclude - ❌ 不要试图用
:not()模拟“非后代”逻辑，它只作用于当前匹配的元素自身
与伪元素混用时的注意事项
:not() 不能直接修饰伪元素，比如 p:not(::first-line) 语法错误；但可以修饰伪类，比如 a:not(:visited) 是合法的。
真正容易踩坑的是层级顺序。例如：
a:not(.external):hover { text-decoration: underline; }
这条规则只对「不是 .external 类且处于 hover 状态」的 a 生效。但如果写成 a:hover:not(.external)，语义完全一样，但可读性更差，且某些老浏览器解析可能不稳定。
- 推荐把
:not()放在伪类之前，即:not(.x):hover而非:hover:not(.x) -
::before和::after无法被:not()选中，因为它们不是真实 DOM 元素 - 不要在
:not()里尝试否定伪元素生成的内容，那不属于选择器控制范围
性能和可维护性提醒
过度嵌套 :not() 会让选择器难以调试，尤其当多个条件叠加时，比如 div:not(.a):not(.b):not([data-ignored]):not(:empty)。浏览器仍需逐个判断每个条件，实际性能影响不大，但协作时极易出错。
- 复杂排除逻辑建议改用 JS 控制 class，例如
el.classList.toggle('excluded', shouldExclude) - 如果必须用 CSS，优先用语义化 class 替代多重
:not()，比如统一加is-included，再写.is-included规则 - 使用 DevTools 的 “Styles” 面板检查
:not()是否生效时，注意它不会出现在“Matched CSS Rules”里——除非当前元素恰好满足所有否定条件
最常被忽略的一点：:not() 的优先级和它内部的选择器一致，:not(.foo) 的优先级等同于 .foo，不是更低。所以它可能意外覆盖其他规则，别以为“否定”就等于“低权重”。
