:not(:last-child)加边框失效主因是dom结构干扰，如注释、空格文本节点导致:last-child误判；应清理结构或改用:last-of-type、:has(+ li)等更鲁棒方案。
:not(:last-child) 加边框为什么有时失效
直接写 li:not(:last-child) { border-bottom: 1px solid #e0e0e0; } 看似合理，但最后一项仍有边框——问题不在选择器写错，而在 DOM 结构干扰。:last-child 要求目标元素是父容器的**最后一个子节点**。只要 ul 末尾存在注释、空格文本节点或其它非 li 元素（比如 <!-- end -->），li 就不是 :last-child，导致边框残留。
- ✅ 正确结构：
<ul> <li>A</li> <li>B</li> </ul> - ❌ 危险结构：
<ul> <li>A</li> <li>B</li> <!-- end --> </ul>（注释使li失去:last-child身份） - ⚠️ 更鲁棒的替代：
li:last-of-type只认元素类型，无视文本/注释节点，语义更稳
:not() 排除多个类必须链式写，不能用逗号
:not(.a, .b) 在 CSS Selectors Level 3 中非法，Chrome/Firefox/Safari 当前生产环境均不支持；写出来整条规则会被浏览器静默丢弃，DevTools 里整行被划掉。
- ✅ 正确写法：
ul li:not(.disabled):not(.hidden)—— 表示“既不带.disabled，也不带.hidden” - ❌ 错误写法：
ul li:not(.disabled, .hidden)—— 语法错误，规则失效 - ⚠️ 注意：链式
:not()是 AND 关系，不是 OR；若某li同时有两者，它仍被排除，符合预期 - ? 真正想表达“只要满足任一就排除”，应改用层叠重置：
ul li { border-bottom: 1px solid #e0e0e0; }+ul li:last-child, ul li.disabled, ul li.hidden { border-bottom: none; }
:has(+ li) 是更可靠的“后面还有兄弟”的判断方式
当你要“只给后面紧跟着另一个 li 的项加底边框”，:has(+ li) 比 :not(:last-child) 更健壮：它不依赖父容器末尾是否干净，只看当前元素后是否有相邻 li 兄弟。
- ✅ 安全写法：
ul li:has(+ li) { border-bottom: 1px solid #e0e0e0; } - ⚠️ 兼容性注意：截至 2026 年 6 月，Chrome 120+、Firefox 115+、Safari 17.4+ 支持；旧版 Safari 需降级 fallback
- ? 不受注释、空格、
<script></script>标签等干扰，逻辑更贴近真实意图 - ? 别写
:not(:last-child):not(.no-border)这类混合条件——语义混乱，且:not()无法表达“位置 + 类”联合排除
别指望 :not() 能跳过祖先带某类的后代元素
.vp-doc p:not(.vp-raw) 只排除自身带 .vp-raw 类的 p，对 .vp-raw 容器内部的 p 完全无效——:not() 只检查目标元素自身，不查祖先。
- ❌ 错误期待：
.vp-doc :not(.vp-raw) p（语法非法）或.vp-doc p:not(.vp-raw)（作用域不对） - ✅ 实际可行：
.vp-raw * { all: revert; }—— 让整个子树回退到继承值或 UA 默认值 - ⚠️
all: revert不是清空样式，而是撤销作者样式层；需注意 Safari 15.4+、Chrome 99+ 才稳定支持 - ? 真正难的不是怎么写
:not()，而是判断“这个排除逻辑，该由选择器承担，还是交给层叠控制”——后者调试直观、兼容性好，前者简洁但容错低
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
