当需为“除特定元素外的所有同类元素”统一设样式时才该用 :not()，如 input:not([type="hidden"])；它只支持单个简单选择器，不支持伪类组合、嵌套或空格，且 IE8- 不兼容。
什么时候该用 :not() 而不是写一堆重复选择器
当你发现要给「除了某几个元素外的所有同类元素」加样式时，:not() 才真正有用。比如表格里除第一行外的 <tr> 都要加边框，或者表单里所有 <code><input> 除了 type="hidden" 的都要设宽度——这时候硬写 input:not([type="hidden"]) { ... } 比列十个 input[type="text"], input[type="email"], ... 更可靠、更易维护。
常见错误是拿 :not() 当“否定逻辑开关”滥用：比如想让「非 hover 状态下隐藏」就写 div:not(:hover) { display: none; }，这完全无效——:not() 不支持伪类状态的否定组合，浏览器直接忽略整条规则。
-
:not()只接受简单选择器（如.cls、[attr]、:first-child），不能嵌套或写复合伪类 - 它匹配的是「父级上下文中的兄弟/子元素」，不是全局过滤；写
ul li:not(.disabled) a和ul li a:not(.disabled)完全不同——前者过滤的是li，后者过滤的是a - IE8 及更早版本不支持
:not()，如果还要兼容，别用；现代项目中基本可放心
:not() 里能写哪些合法的选择器
只能塞单个简单选择器，不能带空格、不能有后代/子代关系、不能连写多个伪类。比如 :not(.active:hover) 是非法的，:not(div p) 也是非法的。
合法示例：:not([disabled])、:not(.skip)、:not(:first-of-type)、:not([data-state="loading"])。
立即学习“前端免费学习笔记（深入）”；
-
:not()支持属性选择器、类名、ID、伪类（但仅限单个，如:checked可以，:nth-child(2n)也可以） - 不支持伪元素（
::before）、不支持标签名组合（button[type="submit"]是一个选择器，但:not(button[type="submit"])在部分老浏览器中解析失败，稳妥起见只用:not([type="submit"])） - 多个排除条件要用链式写法：
:not(.a):not(.b):not([data-ignore])，而不是:not(.a, .b, [data-ignore])（后者语法错误）
性能和层级陷阱：为什么有时候 :not() 反而让样式更难调试
浏览器对 :not() 的匹配是「先找所有父元素，再逐个判断是否满足 not 条件」，在深层嵌套或大量节点时，比直接写正向选择器略慢——不过日常项目几乎感知不到。真正麻烦的是可读性和层叠冲突。
比如你写了 form input:not([type="hidden"]) { width: 100%; }，但后面又有一条 form input[type="text"] { width: 200px; }，那 type="text" 的输入框最终宽度是 200px，因为后一条更具体、权重更高——你以为 :not() 排除了它，其实没有，它只是没被第一条规则覆盖，而是被第二条单独命中了。
- 用
:not()时，务必检查后续是否有更具体的选择器会意外覆盖它 - 避免在复杂组件中用
:not()做“兜底样式”，比如.card *:not(.card-header):not(.card-footer) { padding: 1rem; }——这种写法会让任意子元素都参与匹配，极易和组件内部样式打架 - Chrome DevTools 里，被
:not()排除的元素不会显示该规则的生效状态，容易误判样式是否起作用
替代方案对比：什么情况下不如手动列出来
当排除项极少且固定时，手写正向选择器反而更清晰。比如只有 type="hidden" 和 type="file" 两种要排除，写 input[type="text"], input[type="email"], input[type="password"] { ... } 比 input:not([type="hidden"]):not([type="file"]) { ... } 更直观，也更容易被团队新人理解。
- 如果设计系统明确约定了可用类型（如只允许
text/email/tel），正向枚举更安全——新增一种type不会意外继承旧样式 - CSS-in-JS 或原子化方案（如 Tailwind）里，
:not()很难复用，不如用条件 class 控制，例如class={\`input \${isHidden ? 'hidden' : ''}\`} - 需要配合 JS 动态增删 class 时，
:not(.disabled)看似简洁，但一旦 JS 忘记移除.disabled，样式就卡死；不如统一用.enabled正向控制
最常被忽略的一点：伪类否定本身不触发重排，但如果你用它来切换 display 或 visibility，就得小心父容器高度塌陷或焦点丢失——这些不是 :not() 的问题，而是你用它掩盖了真实的状态管理需求。
