最常用写法是ul li:not(:last-child)加底边框，但易受html注释、空白文本节点干扰；推荐改用:not(:last-of-type)提升容错性，或多规则清除，或语义化使用:has(+ li)。
直接用 li:not(:last-child) 加边框，但得确保结构干净
最常用也最直观的写法就是 ul li:not(:last-child) { border-bottom: 1px solid #e0e0e0; }。它语义清晰：只要 li 不是其父元素（如 ul）的最后一个子节点，就加底边框。
但这个选择器极易被 DOM 中的“隐形干扰”破坏：
- 末尾有 HTML 注释（比如
<!-- end -->），:last-child就会匹配到注释节点，而非最后一个li -
ul里混入了空格、换行产生的文本节点（哪怕只多一个回车），也会让li失去:last-child身份 - 用 JS 动态插入内容后没清理空白节点，同样导致失效
验证方法很简单：打开浏览器开发者工具，选中最后一个 li，在 Styles 面板里搜 :last-child，看 computed 状态是否为 true。
当 :last-child 失效时，优先换 :last-of-type
:last-of-type 只认标签类型，完全无视注释、文本节点甚至其它 HTML 元素。只要最后一个 li 是 ul 下同类型标签里的末位，它就稳稳命中。
适用场景明确：
- 纯
ul > li结构，但末尾带注释或空格 → 改用ul li:not(:last-of-type) -
article内混排p、h2、blockquote，只想给最后一个段落去边框 → 必须用p:not(:last-of-type) - IE8 不在支持范围内时，
:last-of-type是更鲁棒的兜底方案
注意：ul li:last-of-type 和 ul li:last-child 在干净结构下效果一致，但前者不依赖“绝对末位”，容错性高一截。
多个排除条件不能用逗号，得拆成独立规则
想同时排除最后一项和带 .disabled 类的项？别写 li:not(:last-child, .disabled)——这是非法语法，所有主流浏览器都不认。
正确做法是分开控制：
- 先统一加样式：
ul li { border-bottom: 1px solid #e0e0e0; } - 再用两个独立规则清除：
ul li:last-child, ul li.disabled { border-bottom: none; }
原因在于 CSS Selectors Level 3 规范禁止 :not() 接选择器列表；Level 4 虽已允许，但截至 2026 年 9 月，Chrome/Firefox/Safari 的实际支持仍不稳定，生产环境不可靠。
用 :has(+ li) 是新思路，但兼容性要查清楚
如果结构实在混乱，或者你真正想表达的是“后面还有兄弟 li 的才画边框”，li:has(+ li) 是更语义化的解法：
ul li:has(+ li) { border-bottom: 1px solid #e0e0e0; }
它天然避开最后一项，也不受注释/文本节点影响。但注意：:has() 在 Safari 15.4+、Chrome 105+、Firefox 103+ 才稳定支持；旧版 iOS Safari 或部分安卓 WebView 仍会忽略整条规则。上线前务必用目标用户真实设备验证。
真正容易被忽略的点不是语法，而是思维惯性——我们总想“给非末尾项加样式”，却忘了检查 DOM 是否真如所见。结构干净比技巧花哨更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
