本文讲解如何精准使用 `:last-child` 选择器，避免误匹配深层嵌套中的多个同名类元素；核心在于将 `:last-child` 应用于父级直接子元素（而非目标类本身），再通过后代选择器定位其内部的 `.my-class`。
在 CSS 中，:last-child 是一个结构性伪类，它只匹配其父元素的最后一个子元素，且该元素必须与前面的选择器部分完全一致。许多开发者容易误解为“某个类在 DOM 中最后一次出现”，但事实恰恰相反：:last-child 关注的是DOM 树中的位置关系，而非类名的出现顺序。
回到你的 HTML 结构：
<parent> <a><div class="my-class"></div></a> <b><div class="my-class"></div></b> <c><div class="my-class"></div></c> <d><div class="my-class"></div></d> </parent>
你希望仅对 <d> 元素内部的 .my-class 移除边框（border-bottom: none），而 <d> 正是 <parent> 的最后一个直接子元素。因此，正确的逻辑链是：
✅ *先定位 <parent> 的最后一个直接子元素（即 `:last-child）** ✅ **再在其内部查找.my-class`（使用空格表示后代关系）**
立即学习“前端免费学习笔记（深入）”；
对应 CSS 写法为：
parent > *:last-child .my-class {
border-bottom: none;
}⚠️ 注意以下常见错误写法及其原因：
parent .my-class:last-child
→ 错误：.my-class 元素在各自父容器（<a>、<b> 等）中都是唯一的子元素，因此每个都满足 :last-child，全部被选中。parent > * > .my-class:last-child
→ 错误：.my-class 是 <a>、<b> 等的唯一子元素，但不是它们的 :last-child 的「兄弟元素」——这里语法上虽合法，但语义失效，因 .my-class 无同级兄弟，永远匹配。parent > d .my-class
→ 不可靠：如题所述，子元素顺序不固定，<d> 可能不是最后一个，硬编码标签名违反健壮性原则。
✅ 正确方案的优势：
- 结构无关：不依赖具体标签名（如 a/b/c/d），只依赖 DOM 层级关系；
- 动态适应：无论最后一个子元素是 <section>、<div> 还是自定义标签，只要它包含 .my-class，样式即生效；
- 语义清晰：>:last-child 明确表达“父元素的末位直接子节点”，符合 CSS 选择器设计本意。
? 小技巧：若需兼容更复杂场景（例如 .my-class 可能不在最深一层，或存在多层嵌套），可配合 :scope（现代浏览器）或 JavaScript 动态添加临时类增强控制力，但纯 CSS 场景下，> *:last-child .my-class 已是最简洁、标准且可靠的解法。
总结一句话：:last-child 必须作用于真正处于末位的父级子元素上，再向下委托样式，而非加在目标类自身。掌握这一原则，即可从容应对各类动态嵌套结构中的精准样式控制。
