:last-child不生效是因为目标元素不是父容器的最后一个子元素，可能受空标签、注释、文本节点或其他标签干扰；应改用:last-of-type或:not(:last-child)提升可靠性。
为什么 :last-child 有时不生效
直接写 a:last-child { text-decoration: none; } 却发现下划线还在？常见原因是：目标元素不是其父容器的最后一个子元素。比如列表中 <li> 后面还跟着一个空的 </li>、注释节点、或意外插入的 <div>，都会导致 :last-child 匹配失败。浏览器严格按 DOM 树结构判断“最后一个”，不看视觉位置。
实操建议：
- 用浏览器开发者工具检查元素实际父级下的子节点顺序和类型（注意：文本换行也可能生成
Text节点） - 确保目标元素确实是父元素的最后一个子节点，且类型一致（比如都是
<li>） - 若父容器混有其他标签（如
<span>或<button>），:last-child就会失效——这时该换用:last-of-type
:last-of-type 比 :last-child 更可靠
当列表项是同类型标签（如全是 <li>），但后面还有别的元素时，:last-of-type 只关心同类型中的最后一个，不被其他节点干扰。它更适合真实项目中“最后一个列表项”的语义。
示例：
立即学习“前端免费学习笔记（深入）”；
<ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> <div class="footer">© 2024</div> </ul>
此时 li:last-child 不匹配任何 <li>（因为最后一个子是 <div>），但 li:last-of-type 能精准命中第三个 <li>。
对应 CSS：
li:last-of-type a {
text-decoration: none;
}
更稳妥的写法：用 :not(:last-child) 统一加样式
与其单独处理“最后一个”，不如反向思维：给所有非最后一个加下划线。这样逻辑更清晰，容错性更强，也避免因 DOM 结构微调导致样式断裂。
适用场景：
- 导航菜单、分页、标签栏等需要“项间分隔”而非“末尾强调”的列表
- 父容器结构可能动态变化（如 JS 插入/删除节点）
- 团队协作中降低维护成本——规则更易理解
写法示例：
nav a {
text-decoration: none;
}
nav a:not(:last-child) {
border-bottom: 1px solid #ccc;
}
注意：:not(:last-child) 的作用对象是 a，所以要求每个 a 都是其父元素的最后一个子元素才有效；如果 a 套在 <li> 里，就得写成 li:not(:last-child) a。
兼容性与性能小提醒
:last-child 和 :last-of-type 在 IE9+、所有现代浏览器都支持，无需前缀。但要注意：
- IE8 及更早版本完全不支持这些伪类，如需兼容，得靠 JS 或额外 class（如
class="last"） - 伪类选择器本身无性能问题，但嵌套过深（如
ul > li > a:last-of-type）可能轻微拖慢渲染，建议控制在 3 层内 - 如果列表由 JS 动态生成，确保 DOM 插入完成后再依赖这些选择器——它们不监听 DOM 变化
真正容易被忽略的是：下划线是否本就来自父级继承（比如 a 的父 <li> 设置了 border-bottom），而不是 a 自身的 text-decoration。先确认来源，再选对选择器，否则白调半天。
