:not()能减少重复书写，因它将“默认适用+个别跳过”逻辑浓缩为一条规则，如input:not([type="hidden"])统一设边框，无需罗列input[type="text"]等冗余选择器。
为什么:not()能减少选择器重复书写
当你需要给「绝大多数同类元素」统一加样式，只排除少数例外时，:not()直接把“默认适用 + 个别跳过”的逻辑写进一条规则里，不用为每个例外单独写覆盖规则。比如表单里所有 input 都要设边框，但 type="hidden" 的不该有——写 input:not([type="hidden"]) { border: 1px solid #ccc; } 就够了，不用列 input[type="text"]、input[type="email"]、input[type="number"] 等一堆。
:not()不改变选择器权重，但容易引发层叠意外
:not() 生成的选择器权重和正向写法一致：比如 form input:not([type="hidden"]) 和 form input[type="text"] 权重相同。这意味着如果你后面又写了 form input[type="text"] { width: 200px; }，那 type="text" 的输入框就不会被前面的 :not() 规则影响——它被更具体的规则命中了，而不是被“排除”了。
- 别指望
:not()能压制其他高权重规则 - 想确保排除生效，得检查后续有没有更具体的选择器悄悄覆盖它
- 调试时用浏览器开发者工具看“Computed”面板，比猜哪条规则赢了更可靠
哪些值能放进:not()括号里，哪些会直接失效
括号里只能塞一个「简单选择器」：类名（.active）、属性（[disabled]）、伪类（:checked、:first-child），但不能带空格、不能嵌套、不能连写多个伪类。
- 合法：
:not(.skip)、:not([data-state="loading"])、:not(:hover) - 非法：
:not(.a .b)（含空格）、:not(button[type="submit"])（复合选择器，部分老浏览器解析失败）、:not(.active:hover)（双伪类组合） - 多条件排除必须链式：
:not(.disabled):not(.loading)，不是:not(.disabled, .loading)（后者在 CSS Level 3 中无效，Level 4 才支持逗号，但兼容性仍需验证）
IE 和旧版 Safari 的实际兼容边界在哪
IE9+ 支持基础 :not(.cls) 和 :not([attr])，但 IE 不认 :not(:checked) 这类伪类参数；Safari 13.1 之前对 :not(:nth-child(2n)) 解析不稳定。如果你的项目还要跑在政务内网或银行旧终端上，得先查 UA 或用 @supports not selector(:not(:is())) 做特性检测，而不是默认开启。
真正容易被忽略的是：哪怕现代浏览器支持了，:not() 在深层嵌套选择器中（如 section > article div:not(.meta) p）的匹配性能略低——浏览器得先抓到所有 div，再逐个判断是否含 .meta，而 .content p 是直接哈希查找。日常开发感知不到，但在滚动列表或动画帧密集场景，这点差异可能变成卡顿源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
