:not()只能接受简单选择器，不可用复合或后代选择器；排除某类元素下的子元素需改用覆盖样式或data属性；需注意老浏览器兼容性及嵌套性能问题。
如何用 :not() 排除某类元素的样式
直接用 :not() 伪类就能排除匹配的元素，但必须注意它的选择器限制——:not() 里只能写「简单选择器」，不能写复合选择器或后代选择器。
:not() 里能写什么、不能写什么
常见错误是试图在 :not() 中写 .container .item 或 div p，这会直接导致整个规则失效（浏览器忽略该 CSS 声明）。
- ✅ 允许：
:not(.disabled)、:not([data-id])、:not(:hover) - ❌ 不允许：
:not(.list .active)、:not(div > span)、:not(.btn.btn-primary) - ⚠️ 注意：
:not(.a.b)是合法的（表示同时含a和b两个 class 的元素），但它匹配的是「单个元素拥有多个类」，不是「后代关系」
想排除「某类元素下的子元素」怎么办
当目标是「给所有 p 加样式，但排除 .sidebar p」时，:not() 无法直接实现。得换思路：用更具体的选择器覆盖，或借助属性标记。
/* ❌ 错误写法（语法非法） */
p:not(.sidebar p) { color: red; }
<p>/<em> ✅ 正确做法 1：先设全局，再重置特定区域 </em>/
p { color: red; }
.sidebar p { color: inherit; }</p><p>/<em> ✅ 正确做法 2：加 data 属性，用 :not() 精准控制 </em>/
p:not([data-no-style]) { color: red; }
/<em> HTML 中对要排除的 p 加上 data-no-style 属性 </em>/性能与兼容性提醒
:not() 在现代浏览器中表现稳定，但老版本 Safari（≤ 8）和 IE 完全不支持。如果项目需兼容 IE，必须用 class 分离或 JS 动态处理。
立即学习“前端免费学习笔记（深入）”；
另外，过度嵌套 :not()（如 :not(:not(.a))）不仅难读，某些浏览器解析时还可能触发重排开销——尤其在大量元素上使用时。
真正麻烦的从来不是语法会不会写，而是想排除的“那部分”到底该由谁来定义：是靠 DOM 结构、class 命名约定，还是数据属性。选错了锚点，:not() 再好用也救不回来。
