:not()仅支持简单选择器，不支持后代等复杂语法；兼容性方面IE9+支持，Chrome105+才支持:not(:hover)；其不降低选择器优先级，需注意声明顺序；无法否定结构关系，复杂场景应改用显式类名或JS。
怎么用 :not() 排除某个元素
直接写 :not(.target) 或 :not(#id) 就能跳过匹配该选择器的元素，但要注意：括号里只能是「简单选择器」，不能写 :not(div p) 这种后代关系，浏览器会直接报错或忽略整条规则。
常见错误是以为可以嵌套伪类，比如 :not(:hover) 看似合理，但 CSS 规范只允许 :not() 里放类型选择器、类、ID、属性、伪类（仅限 :is()、:where()、:not() 自身等少数几个），而 :hover 是允许的——但实际兼容性差，Chrome 105+ 才支持 :not(:hover)，旧版一律不生效。
-
:not([disabled])可用于只给启用的按钮加样式 -
:not(.skip)是最常用也最安全的写法，兼容性覆盖 IE9+ - 避免写
:not(div.class)，IE 不认这种组合，应拆成div:not(.class)
:not() 和其他选择器连用时的优先级陷阱
很多人写 button:not(.primary) { color: gray; }，结果发现 .primary 按钮文字还是灰色——因为另一条更具体的规则如 button.primary { color: blue; } 优先级更高，:not() 并不降低它所在选择器的权重。
真正起作用的是「整个选择器的特异性」：button:not(.primary) 和 button.primary 特异性相同（都是 0-1-1），谁在后面谁生效。所以顺序很重要，而且别指望 :not() 能“覆盖”已定义的样式。
立即学习“前端免费学习笔记（深入）”；
- 想确保反选样式生效，把它放在相关类规则之后
- 不要依赖
:not()来“撤销”样式，CSS 没有“取消”概念，只有“重新声明” - 复杂场景下，宁可用显式类名（如
.secondary）代替:not(.primary)，更可控
哪些情况 :not() 根本不适用
遇到父子同结构、需要根据上下文排除时，:not() 无能为力。比如想给「不是 .sidebar 子元素的 h2」加样式，h2:not(.sidebar h2) 是非法语法——:not() 不接受复杂选择器。
这时候得换思路：要么加个新类（h2.main-title），要么用 JS 动态判断 closest('.sidebar')，或者改用 :is() + 否定逻辑组合（但兼容性更弱）。
-
:not()无法否定祖先、兄弟、子元素关系 - 不能替代 JS 的条件判断，尤其涉及 DOM 结构动态变化时
- 在 CSS-in-JS 或 Shadow DOM 中，
:not()行为可能受封装限制，需实测
IE8 及更老浏览器的兼容问题
:not() 在 IE9+ 才开始支持，IE8 及以下完全忽略含 :not() 的整条 CSS 规则——不是部分失效，是整行当不存在。如果你还必须兼容 IE8，就别用它。
没有优雅降级方案，polyfill（如 Selectivizr）对 :not() 支持极差，且会拖慢渲染。真要兼容，只能手动补全所有“要匹配”的选择器，比如把 input:not([type="hidden"]) 拆成 input[type="text"], input[type="email"], ...，但维护成本高。
- 现代项目基本不用考虑 IE8，但若接手老系统，先查构建工具是否自动加了 autoprefixer，它不会处理
:not() - 用
caniuse.com查具体版本支持比看文档更快 - CI 中加 CSS 语法检查（如 stylelint）能提前发现非法
:not()写法
