:last-child 失效是因为它严格匹配父元素最后一个直接子节点的标签名，而换行、注释等文本节点会使目标元素失去“最后一个”身份；:last-of-type 更可靠，只按同类型标签排序取最后；:not(:last-child) 正向设置样式容错更高；动态场景需 JS 主动标记可见末项。
为什么 :last-child 经常“看不见”最后一个目标元素
它根本不是在找“视觉上最后一个”，而是严格检查：父元素的最后一个直接子节点，是否恰好是你写的那个标签名（比如 li）且类型完全一致。只要后面多一个换行、注释 <!-- --> 、<script></script> 或者 <div>，<code>:last-child 就立刻失效——因为最后一个子节点已经不是 li 了。
常见现象：ul > li { border-bottom: 1px solid #ddd; } 想用 li:last-child { border-bottom: none; } 去掉末项边框，结果没反应。打开浏览器 Elements 面板，展开 ul，你大概率会看到最后一行是文本节点（换行符）或注释，而不是 li。
li:last-of-type 比 li:last-child 更靠谱的场景
当父容器里混有其他标签（如 <div>、<code><p></p>），或者模板引擎（Vue/React）注入了注释节点时，:last-of-type 是更务实的选择：它只统计同类型标签（比如所有 li），然后取其中最后一个。
-
ul li:last-of-type能命中最后一个li，哪怕它后面还跟着一个<div class="footer"> <li>IE8 不支持 <code>:last-of-type，老项目需确认兼容性底线 - 如果列表项用的是
<article></article>或<div class="item">，把 <code>li替换成对应标签名即可，逻辑不变 - 注意：它仍依赖 DOM 中真实存在的同类型标签顺序，对
display: none的元素不跳过——隐藏的li依然参与计数 -
li:not(:last-child) { border-bottom: 1px solid #ddd; }—— 只要li是父容器最后一个子元素，它就被排除；其余全部命中 - 比
li:last-child { border-bottom: none; }更少受空节点干扰（因为判断主体是“非 last”，容错更高） - 不适用于需要精确控制“倒数第 n 个”的场景，比如只给倒数第二项加背景色
- IE8 不支持
:not()嵌套伪类，若需兼容，得回退到 JS 或预设 class
用 :not(:last-child) 正向设样式反而更稳
与其费力“删掉最后一项的边框”，不如直接给“非最后一项”加边框。这种正向思路避开了很多陷阱：
立即学习“前端免费学习笔记（深入）”；
动态渲染下别硬扛 CSS，该交 JS 就交 JS
CSS 伪类全是静态解析的，对 display: none、visibility: hidden、JS 动态增删的元素完全无感。想选“当前可见的最后一个 .item”，纯 CSS 没解。
可靠做法是让 JS 在 DOM 更新后主动标记：
document.querySelectorAll('.item').forEach((el, i, arr) => {
el.classList.toggle('item-last-visible', i === arr.length - 1 && getComputedStyle(el).display !== 'none')
})然后写 .item-last-visible { /* 样式 */ }。这一步不能省——尤其在分页加载、筛选显示、动画折叠等场景，DOM 结构和可见状态早已脱离 CSS 能感知的范围。
真正容易被忽略的是：开发者常以为“结构没变”就等于“CSS 还能用”，但只要 visibility、display 或 JS 插入/移除节点，:last-child 的计算基础就塌了一半。
