:not()不是覆盖工具而是过滤器，只决定元素是否参与规则，无法推翻高优先级样式；应反向设计：先归零容器，再用:not()放行需间距的元素。
为什么直接用 :not() 重置组件库边距大概率失败
因为 :not() 不是“覆盖工具”，而是“过滤器”——它只决定哪些元素**参与当前规则**，不负责推翻已有样式。Ant Design 的 .ant-btn 上的 margin: 8px 是通过高优先级 class 写死的，你写 div:not(.keep) { margin: 0 }，只要选择器优先级不够、没命中目标元素、或组件用了 !important，就完全无效。
常见翻车现象：
- DevTools 里看到 margin 被标为 overridden，但你的
:not()规则根本没出现在 Styles 面板里（说明没匹配上） - 组件渲染在 Shadow DOM 里（如 Lit 组件），外部 CSS 根本无法穿透
- 你以为在清
margin，其实组件靠的是父容器的gap，:not()对gap无能为力
:not() 真正该用在哪：限定“免重置范围”
别试图用 :not() 扫描所有子元素去清 margin，而应反向设计：先归零大容器，再用 :not() 明确放行少数需要间距的元素。
例如：
.card-section { margin: 0; }
.card-section > *:not(.no-spacing) { margin-bottom: 1rem; }
.card-section .no-spacing { margin-bottom: 0; }
这样做的好处：
- 避免和组件库 class 拼优先级，靠结构层级压制
-
:not(.no-spacing)是主动标记“要留空隙”的元素，语义清晰，不易误伤 - 新增组件时默认无 margin，加
.no-spacing才豁免，符合渐进增强逻辑
遇到末尾多出空隙？优先用 :not(:last-child) 而非通配符
动态列表中末尾多一行空白，是典型场景。此时用 *:not(:last-child) { margin-bottom: 1rem } 是错的——通配符性能差，且会把 h2、button 全拖下水。
正确做法按结构选锚点：
- 纯
ul > li结构：ul > li:not(:last-child) { margin-bottom: 0.75rem; } - 文章混排段落：
article p:not(:last-of-type) { margin-bottom: 1.25rem; } - Flex 容器内卡片：
.cards > *:not(:last-child) { margin-right: 1rem; }（注意：仍以 DOM 顺序为准，不看order）
关键提醒：:not(:last-child) 不处理 display: none 元素——它还在 DOM 里，就算隐藏了，也会被算作“最后一个”，导致前一个可见元素被错误排除。
兼容性与链式 :not() 的实际限制
现代项目基本不用管 IE8，但以下细节仍常踩坑：
-
:not(.a, .b)（逗号分隔多条件）是 Level 4 特性，Chrome/Firefox/Edge 均支持，但 Safari 15.4 之前不支持；稳妥写法是:not(.a):not(.b) -
:not()内部不能嵌套复合选择器，比如:not(div p)语法非法；也不能写:not(::before)（伪元素不允许） -
:not()自身不增加权重，li:not(:first-child)的优先级 =li:first-child，所以它赢不过.ant-list-item这类带 class 的规则
真正卡住人的，从来不是怎么写对这行 CSS，而是没想清楚：你要控制的是结构位置，还是视觉流？是整个容器，还是某类子节点？选错起点，后面调十遍 margin 都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
