: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 - 注意顺序无关，但括号必须完整，不能省略