当需为“除特定元素外的所有同类元素”统一设样式时才该用 :not()，如 input:not([type="hidden"])；它只支持单个简单选择器，不支持伪类组合、嵌套或空格，且 IE8- 不兼容。

什么时候该用 :not() 而不是写一堆重复选择器

当你发现要给「除了某几个元素外的所有同类元素」加样式时，:not() 才真正有用。比如表格里除第一行外的 都要加边框，或者表单里所有 除了 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 条件」，在深层嵌套或大量节点时，比直接写正向选择器略慢——不过日常项目几乎感知不到。真正麻烦的是可读性和层叠冲突。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

比如你写了 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() 的问题，而是你用它掩盖了真实的状态管理需求。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！