:not()不降低权重，其内部选择器参与计算，如button:not(.primary)权重为0,0,2,0，可能覆盖低权规则；括号内仅限简单选择器，写错则整条规则静默失效。
为什么加了:not()后样式反而被盖住了？
因为:not()本身不降权，它括号里的选择器会参与权重计算。比如button:not(.primary)的特异性是 (0,0,2,0)——等于button（0,0,1,0）加上.primary（0,0,1,0）之和。它比单纯的button高一级，也比.btn（0,0,1,0）高一级。
常见踩坑点：
- 本想“排除 primary 按钮”，结果
button:not(.primary)压过了全局.btn规则，导致非 primary 按钮也不走基础样式 - 在 CSS-in-JS 或原子化工具中，
input:not([disabled])可能意外比u-border-solid类（0,0,1,0）权重更高，覆盖失败 - 用
form input:not(.ignore)代替form :not(.ignore) input——后者语法非法，前者才是安全写法
:not()里该写什么？哪些写法直接失效？
:not()只接受单个简单选择器。括号里一错，整条 CSS 规则就被浏览器静默丢弃，DevTools 里整行灰掉，控制台还不报错。
能写的：.disabled、[type="hidden"]、:checked、button
不能写的（全部导致规则失效）：
-
.a .b（含空格 → 后代选择器） -
div > p（含组合器） -
:hover:focus（多伪类连用） -
:not(.a):not(.b)嵌套进另一个:not()里，如:not(:not(.active)) -
.sidebar p（试图穿透父级匹配子元素）
要排除多个类，写:not(.a, .b)还是:not(.a):not(.b)？
两者语义一致，都是“不满足 a 且不满足 b”，但兼容性和可读性不同。
:not(.a, .b)是 CSS Level 4 语法，Chrome/Firefox 支持好，但 Safari ≤15.4 完全静默忽略——你写了等于没写。
:not(.a):not(.b)是稳妥方案，所有现代浏览器都支持，链式结构明确表达“且”逻辑。
注意：
- 别手抖写成
:not(.a .b)（空格）或:not(.a||.b)（非法符号） - 如果目标是“排除同时带两个类的元素”，应改用
:not(.disabled.required)，而不是链式 - 多条件叠加时优先级会累加：
input:not([disabled]):not([readonly])权重是 (0,0,2,1)，比单个属性选择器高
SCSS 里嵌套:not()容易出什么问题？
SCSS 的&会完整展开父选择器路径，一不留神就让:not()权重爆炸。
错误写法：.form { &:not(.disabled) { } } → 编译为.form:not(.disabled)（还好）；但如果父级是.modal .content .form，就会变成.modal .content .form:not(.disabled)（权重 0,3,1），几乎无法被覆盖。
更危险的是嵌套伪类：.btn { &:not(:disabled):hover { } }在旧 Safari 中解析不稳定，且可读性差。
建议做法：
- 把
:not()逻辑提到顶层，避免&拖入长路径 - 用 BEM Modifier 显式命名状态，如
.btn--enabled，而非依赖:not(.disabled) - 禁用 SCSS 中
&:not(.a):not(.b):hover这类深层组合，拆成独立规则更可控
真正难的不是怎么写出合法的:not()，而是每次加之前，先问一句：这个权重我真能 hold 住吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
