:not()不支持多参数，需嵌套多个:not()实现并列排除，如button:not(.disabled):not(.hidden)；现代浏览器支持:not(A.B)语法排除组合条件，但兼容性需注意；复杂排除应优先用显式类名而非深层:not()嵌套。
css:not()里怎么写多个排除条件
:not() 本身不支持直接写多个参数，比如 :not(.a, .b) 是非法语法，浏览器会直接忽略整个选择器。想排除多个类、属性或状态，必须把每个条件单独套一层 :not()，然后用连写（即隐式 &&）组合。
例如，要选中“既不是 .disabled，也不是 .hidden”的按钮：
button:not(.disabled):not(.hidden) { opacity: 1; }
这等价于逻辑上的 “button && !disabled && !hidden”，不是“! (disabled || hidden)”的取反——但结果一致，因为布尔代数中二者等价。不过注意：这种写法只适用于并列排除，不能表达“排除有 A 属性但没有 B 类”的复合逻辑。
用:not()排除带属性和类的组合条件
如果要排除的是“同时满足多个特征”的元素（比如 input[type="text"].error），不能写成 :not(input[type="text"].error) —— 这在 CSS4 之前是无效的（旧版浏览器如 IE 完全不支持）。现代浏览器（Chrome 85+、Firefox 68+、Safari 14+）已支持，但兼容性仍需确认。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是降级为多层 :not() 套用，并确保选择器顺序不影响特异性：
-
input:not([type="text"]):not(.error)❌ 错误：这是“非 text 类型 或 非 error 类”，不是“非（text 且 error）” -
input:not([type="text"]).error❌ 错误：语义变成“是 error 类但 type 不是 text”，方向反了 -
input:not([type="text"]):not(.error), input[type="text"]:not(.error), input:not([type="text"]).error❌ 过度复杂，不可维护 - ✅ 正确（现代写法）：
input:not([type="text"].error)—— 必须确保目标浏览器支持 CSS Selectors Level 4
:not()嵌套伪类时的常见失效场景
像 a:not(:hover):not(:focus) 看似合理，但实际几乎没用：因为 :hover 和 :focus 是互斥的瞬态状态，一个元素在同一时刻最多只匹配其中一个。更关键的是，:not() 里不能使用可变伪类做“动态排除”，比如 :not(:nth-child(2n)) 是合法的，但 :not(:target) 在某些上下文中可能因渲染时机问题不生效。
容易踩的坑：
-
div:not(:first-of-type):not(:last-of-type)会漏掉只有一个子元素的情况（此时它既是 first 也是 last，被双重排除） -
p:not([data-loaded="true"])对初始无该属性的p生效，但如果 JS 后续加了属性，样式不会自动回退——:not()不监听属性变更 - 用
:not()排除:checked时，记得它只作用于等原生控件，对自定义复选框无效
性能与可读性权衡：什么时候别硬套:not()
当排除逻辑变复杂（比如要排除 3 个类 + 1 个属性 + 某个父容器存在），:not() 嵌套会迅速变得难读、难调试，且增加 CSS 特异性计算负担。浏览器对深层嵌套 :not() 的优化不如简单选择器。
更务实的做法：
- 优先给需要样式的元素加明确类，比如
.active-primary，而不是靠:not(.disabled):not(.archived):not(.pending)反推 - 用 CSS 自定义属性配合 JS 控制开关：
div[style="--exclude:1"]配合:not([style*="--exclude:1"])（不推荐，仅作对比说明） - 对动态内容，宁可在 JS 中切换类名，也不依赖复杂
:not()组合去“猜”哪些该显示
真正棘手的不是语法会不会写，而是想清楚：这个“排除”是 UI 状态的真实表达，还是只是偷懒不想改 HTML 结构。
