本文讲解如何在 html 深度嵌套结构中，仅对父容器的**最后一个直接子元素内部的指定类（如 `.my-class`）**应用样式，避免 `:last-child` 错误匹配所有嵌套层级中的同类元素。核心在于理解 `:last-child` 的作用对象是**其前缀选择器所匹配的元素本身**，而非后代元素。
在实际开发中，我们常遇到类似如下 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>（即 <parent> 的最后一个直接子元素）内部的 .my-class 移除底边框，而其他 <a>、<b>、<c> 中的 .my-class 保持原样式。
但若写成：
parent > .my-class:last-child { /* ❌ 错误 */
border-bottom: none;
}或
立即学习“前端免费学习笔记（深入）”；
parent .my-class:last-child { /* ❌ 错误 */
border-bottom: none;
}则无效——因为 .my-class 是 <div>，它在各自父级（<a>、<b> 等）中几乎总是唯一的子元素，所以每个 .my-class 都满足 :last-child，导致全部被选中。
✅ 正确思路是：*先定位到 <parent> 的最后一个直接子元素（即 `parent > :last-child），再在其内部查找.my-class`**：
parent > *:last-child .my-class {
border-bottom: none;
}该选择器含义为：
→ 匹配 <parent> 的任意直接子元素（*）中，排在最后的那个（:last-child）；
→ 再在这个“最后一个子元素”内部，查找所有后代 .my-class（注意是空格，非 >，以兼容 .my-class 可能嵌套多层的情况，如 <d><span><div class="my-class"></div></span></d>）。
? 补充说明与最佳实践：
-
若 .my-class 严格位于最后一个子元素的直接子级（即 <d class="my-class"> 或 <d><div class="my-class"></div></d>），可进一步收紧为：
parent > *:last-child > .my-class { border-bottom: none; }使用 > 可提升精确性，避免意外命中更深层嵌套。
不要依赖元素标签名（如 parent > d .my-class）：如题所述，子元素类型不固定（可能是 <section>、<article> 或自定义标签），且顺序可能变化，因此必须使用通用选择器 *:last-child。
注意浏览器兼容性：*:last-child 在所有现代浏览器及 IE9+ 均支持，无兼容风险。
✅ 验证技巧：在 DevTools 中检查计算样式，确认规则是否仅应用于预期 DOM 节点；也可临时添加 outline: 2px solid red 辅助视觉验证。
总结一句话：:last-child 永远修饰的是它前面那个选择器所代表的元素，而非后面的后代。想控制“某个祖先的最后一个孩子里面的某类元素”，关键在于把 :last-child 放在路径中间的容器节点上，而非最终的目标类上。
