:last-child 只匹配父元素中同类型标签的最后一个子元素，如p:last-child在abc中不生效；应改用p:last-of-type选中b；css无法跨层级选中全局末尾某类节点，需js或标记辅助。
如何用 :last-child 选中最后一个子节点
:last-child 是最直接的方式，但它只匹配「父元素下同类型标签中的最后一个」。比如 <div>
<p>A</p>
<p>B</p>
<span>C</span>
</div> 中，p:last-child 不会匹配任何 <p></p>，因为最后一个子节点是 <span></span>，不是 <p></p>。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
- 以为
p:last-child能选中所有<p></p>中的最后一个 —— 实际上它要求该<p></p>必须是其父元素的最后一个子元素 - 混用
:last-of-type，后者才按标签类型统计（见下一条）
想选「同类型中最后一个」？用 :last-of-type
当父容器里混着多种标签，又只想定位某类标签的末尾项时，:last-of-type 更可靠。上面那个例子中，p:last-of-type 就能准确选中 <p>B</p>。
注意点：
-
:last-of-type不关心兄弟节点顺序是否连续，只看类型和出现位置 - 如果父元素内只有一个
<p></p>，p:last-of-type和p:first-of-type效果一致 - 性能上二者无明显差异，但语义更清晰，推荐优先考虑
纯 CSS 无法跨层级选中「整个 DOM 树中最后一个某类节点」
CSS 选择器作用域始终局限于父-子关系，没有全局索引能力。比如你无法写出一个选择器，直接命中页面里倒数第一个 <li>，不管它嵌套多深。
这类需求必须换思路：
- 加 class 或 data 属性手动标记，如
<li class="last-item"> - 用 JS 动态查找并添加 class：
document.querySelectorAll('li').at(-1)?.classList.add('tail-li') - 服务端渲染时提前计算并注入标识
Flex/Grid 容器中「视觉最后一个」不等于 DOM 最后一个
当使用 flex-direction: row-reverse 或 grid-auto-flow: column-reverse 时，用户看到的“最后一个”在视觉上可能对应 DOM 中的第一个节点。
此时伪类仍按 DOM 顺序工作，不会自动适配视觉顺序：
-
:last-child依然匹配 HTML 中最后一个子节点，哪怕它显示在最左边 - 若需按视觉顺序控制样式，得配合
order属性调整 DOM 位置，或改用 JS 判断渲染后位置 - 不要依赖伪类去响应
flex-wrap换行后的“行末尾”，那已超出 CSS 选择器能力范围
