17370845950

:not()伪类仅支持简单选择器，不可用于复合选择器；无法跨层级否定子元素，需用正向选择或分层类名；不改变优先级，多:not()链式使用表示“且”关系。

用 :not() 伪类可以排除特定元素，让样式不作用于它们，但要注意它的使用限制和常见误区。

not伪类只能用于简单选择器

:not() 括号里只能写一个“简单选择器”，比如类名、ID、属性、标签名或伪类（如 :hover），不能写复合选择器（如 .box .item 或 div p）。

• ✅ 正确：p:not(.special)、input:not([type="hidden"])、li:not(:first-child)
• ❌ 错误：ul li:not(.nav li)、div:not(.header .logo)

想排除子元素？得换思路

如果目标是“给所有 p 加样式，但排除某个 p 里的子 span”，:not() 无法直接跨层级否定。这时应优先考虑更精准的正向选择：

• 给需要样式的 p 单独加类，如
  ，再写 p.content { color: blue; }
• 用后代选择器避开干扰区域：.main p { color: blue; }，而把特殊 p 放在 .sidebar 里，它自然不受影响
• 若必须用 :not，可结合类名分层：p:not(.excluded) span —— 前提是那个特殊的 p 有明确类名

注意层叠顺序：not不是“强制跳过”

:not() 只影响选择器是否匹配，不改变CSS优先级。如果被排除的元素又被其他更高优先级规则选中，样式仍会生效：

• p:not(.ignore) { color: red; } 不会给
  设红色
• 但如果同时存在 p { color: green; }，且没加 !important，那 .ignore 的 p 还是绿色（因为 p 规则匹配它）
• 真正“排除生效”，需确保它不被任何其他规则覆盖，或用更具体的选择器重置

实用小技巧：组合多个not

可以链式使用 :not() 实现多条件排除，等价于“且”关系：

• button:not(.primary):not(.disabled):not([data-locked]) → 匹配既不是 primary 类、也不 disabled、也没有 data-locked 属性的 button
• 注意顺序无关，但括号必须完整，不能省略