:last-child 选择器可精准选中父容器中最后一个子元素，按DOM位置匹配而非元素类型，但受末尾注释、空格或异类标签影响；需按类型匹配末位时应改用 :last-of-type。
直接用 :last-child 选择器就能精准选中父容器里的最后一个子元素，无需额外加类名或 JS。
基础用法：匹配最后一个子元素
只要目标元素是其父级的最后一个子节点，:last-child 就能命中。注意它认的是“位置”，不是“类型”——哪怕最后一个子元素是 <p>，前面全是 <div>，它照样生效。
- 写法示例：
ul li:last-child { color: red; }→ 给无序列表中最后一个<li>加红色文字 - 支持链式组合：
section > p:last-child表示只选<section>的直接子级中最后一个<p> - 可搭配伪类使用，比如
button:last-child:hover控制最后一个按钮的悬停态
注意边界：不是所有“最后一个”都能被选中
:last-child 只看 DOM 结构中的顺序，如果最后一个子元素和你想设样式的元素类型不同，就可能失效。
- 常见陷阱：HTML 中末尾有注释、空格文本节点，或混入了其他标签（如
<span>），会导致目标元素失去“最后一个”身份 - 例如：
<div><p>A</p><p>B</p><span>C</span></div>，此时p:last-child不会匹配 B，因为 B 后面还有<span> - 若需按元素类型找“同类中的最后一个”，改用
:last-of-type更稳妥
实用技巧：配合其他选择器增强控制力
单独用 :last-child 有时不够灵活，结合其他规则可以更精准地落地。
立即学习“前端免费学习笔记（深入）”；
- 排除特定情况：
nav a:not(:last-child) { margin-right: 1rem; }→ 给导航链接加右间距，但最后一个不加 - 叠加状态样式：
li:last-child a { font-weight: bold; }→ 最后一个列表项里的链接加粗 - 响应式中微调：
@media (max-width: 768px) { .card-grid > div:last-child { margin-bottom: 0; } }
替代方案：当 :last-child 不适用时
如果结构动态、不可控，或者需要兼容老版本 IE（:last-child IE9+ 支持），可考虑这些办法：
- 手动加 class：
<li class="last">…</li>，再写.last { … }—— 简单直接，适合静态内容 - 用
:last-of-type：选同类型中排最后的，比如div p:last-of-type会选<div>内最后一个<p>，不管中间有没有其他标签 - JS 动态添加 class：适用于渲染后才知道哪个是末位的场景，例如 Vue/React 列表循环中通过索引判断
v-if="index === list.length - 1"
