: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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，因为最后一个子节点是 <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 选择器能力范围
