:last-child不生效是因为它严格匹配父元素的最后一个子节点，若末尾存在注释、空文本节点或非目标标签（如div、script），则选择失败；推荐改用li:last-of-type或:not(:last-child)正向设置边框。
为什么 :last-child 有时不生效？
常见现象是给列表项加了 border-bottom，想用 li:last-child { border-bottom: none; } 去掉最后一项的边框，但发现没反应。根本原因通常是：父容器里最后一个子元素不是 li —— 比如后面跟着注释、空格文本节点、> 标签外的换行，甚至隐藏的 <script></script> 或 <!-- comment -->。CSS 的 :last-child 只认“同级中排最后的那个元素节点”，不忽略文本或注释。
- 确保
ul或ol的直接子节点全是li，没有多余换行或注释 - 查看浏览器开发者工具的 Elements 面板，展开父容器，确认最后一个子节点确实是
li - 如果用了模板引擎（如 Vue/React），注意它可能注入注释节点或占位符，此时
:last-child失效
li:last-child 的正确写法和常见变体
最稳妥的写法是明确限定作用域，避免全局污染：
ul > li {
border-bottom: 1px solid #ccc;
}
ul > li:last-child {
border-bottom: none;
}
注意点：
- 用
ul > li而非ul li，防止样式意外继承到嵌套子列表 - 如果列表项是
div或其他语义化标签（如article），把li换成对应标签名 - 在 Flex/Grid 布局中，
:last-child依然有效，但它只看 DOM 顺序，不看视觉排列顺序
替代方案：当 :last-child 不可靠时用什么？
如果 DOM 结构不可控（比如 CMS 输出、第三方组件），优先考虑：
- 改用
:not(:last-child)正向设置边框：ul > li:not(:last-child) { border-bottom: 1px solid #ccc; }——这样即使末项不是li，也不会多画边框 - 使用
border-top+:first-child反向处理：ul > li { border-top: 1px solid #ccc; } ul > li:first-child { border-top: none; }，逻辑更稳定 - CSS 自定义属性配合 JS 动态控制（仅在需要响应式重排或动态增删时考虑）
兼容性和性能影响很小，但别滥用
:last-child 是 CSS2.1 就支持的伪类，IE9+ 全部兼容，无需前缀。性能上几乎无开销——浏览器只在渲染树构建后做一次子节点索引，不触发重排。
真正容易被忽略的是：它对「伪元素」和「display: contents」子元素无效。比如某个 li 设置了 display: contents，它的子节点会“冒泡”进父容器的子节点列表，此时原 li 就不再是 :last-child 了。这种场景下必须改用 JS 或重构结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
