:not(:last-child)加边框失效主因是dom结构干扰，如注释、空格文本节点导致:last-child误判；应清理结构或改用:last-of-type、:has(+ li)等更鲁棒方案。
为什么 :not() 在列表中加边框会失效？
直接写 li:not(.no-border) { border-bottom: 1px solid #ccc; } 看似合理，但常发现最后一项仍有边框——这不是选择器写错了，而是逻辑误判：你本想“给除最后一项外的所有 li 加底边框”，却错误地试图用类名排除。只要某个 li 没加 no-border 类，它就会被选中，包括最后一项。真正要排除的不是“带某类的元素”，而是“特定位置的元素”。
:not(:last-child) 是最直接的解法
对列表项统一加底边框，再用 :not() 排除位置型伪类，语义清晰且无需额外 HTML 类名：
ul li {
padding: 8px 0;
}
ul li:not(:last-child) {
border-bottom: 1px solid #e0e0e0;
}
这个写法生效的前提是：li 必须是其父容器（如 ul）的**最后一个子元素**。如果 ul 末尾有注释、空格文本节点或其它非 li 元素，:last-child 就不会命中最后一个 li，导致边框残留。
- ✅ 正确结构：
<ul> <li>A</li> <li>B</li> </ul> - ❌ 危险结构：
<ul> <li>A</li> <li>B</li> <!-- end --> </ul>（注释使li不是:last-child） - ⚠️ 注意：
:last-of-type在纯li列表中效果等同，但语义更稳——它只看元素类型，忽略文本/注释节点
需要排除多个条件时，:not() 可嵌套但有限制
比如既要排除最后一项，又要排除带 disabled 类的项，不能写成 li:not(:last-child):not(.disabled) ——这表示“既不是最后一项、又没有 disabled 类”的项，而你真正想要的是“只要满足任一条件就排除”。此时应改用组合排除：
ul li {
border-bottom: 1px solid #e0e0e0;
}
ul li:last-child,
ul li.disabled {
border-bottom: none;
}
原因：:not() 不支持选择器列表（CSS Selectors Level 3 规范限制），:not(.a, .b) 是非法语法；Level 4 虽允许，但目前 Chrome/Firefox/Safari 仅部分支持，生产环境不可靠。
用 :has() 做反向控制（新方案，注意兼容性）
如果必须基于后续兄弟元素是否存在来决定是否画边框（例如“只有后面还有 li 的项才加底边框”），可用 :has()：
ul li:has(+ li) {
border-bottom: 1px solid #e0e0e0;
}
这个选择器意思是：“后面紧跟着另一个 li 的 li”。它天然避开最后一项，也不受注释干扰。但要注意：
- ✅ Chrome 105+、Safari 15.4+、Firefox 121+ 支持
- ❌ Firefox 120 及更早版本不支持
:has()在样式表中使用（仅支持在querySelector中） - ⚠️ 不要和
:not()混用，比如li:not(:has(+ li))语义冗余，且增加解析负担
实际项目中，:not(:last-child) 足够覆盖绝大多数列表边框需求。真正容易被忽略的是 DOM 结构的“隐形干扰”——空格、换行、注释都会让 :last-child 失效，这时换成 :last-of-type 或显式重置更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
