CSS:last-child选择器如何选中最后一个子元素

.item:last-child不生效是因为它要求元素既是父元素最后一个直接子节点又是.item类型，而DOM中常存在注释、空格文本节点或其他标签干扰，导致目标元素并非最后一个子节点；:last-of-type则只匹配同标签中最后一个，更可靠。

为什么 .item:last-child 有时不生效？

它只认 DOM 树里「父元素的最后一个直接子节点」，且必须是 .item 类型的元素。常见失效场景：

1. 父容器末尾有注释、空格文本节点或其它标签（比如 ），哪怕 .item 是倒数第二个，.item:last-child 也匹配不上
2. 最后一个子元素是
   ，但父容器里还藏着一个 标签——它算子节点，.item 就不是 last
3. 嵌套结构中误用：.item:last-child 会同时命中外层和内层的最后一个 .item，因为每个父级都独立计算

验证方式很简单：打开开发者工具，选中父容器，看 Elements 面板里它的子节点列表，数一数最后一个是不是你要的目标元素，且类型/类名完全匹配。

:last-child 和 :last-of-type 到底差在哪？

:last-child 看位置，:last-of-type 看标签名。

1. div:last-child → 只有当父容器最后一个子节点是
   才生效
2. div:last-of-type → 找父容器里所有
   中 DOM 位置最靠后的那个，哪怕后面还跟着

   或

   举个例子：

   <section><p>A</p><div>B</div><p>C</p><div>D</div><footer>E</footer></section>

   p:last-child 不匹配任何元素（<footer> 是最后一个）；p:last-of-type 匹配 <p>C</p>；div:last-of-type 匹配 <div>D</div>。

   想选“带某 class 的最后一个直接子元素”，该用哪个？

   .item:last-child 表面看能用，但前提是：

   1. 所有 .item 都是父容器的直接子元素
   2. 它们中间不能夹杂其它标签（否则最后一个 .item 就不是 :last-child）
   3. 没有嵌套结构干扰（否则子容器里的 .item 也会被选中）

   更稳妥的做法是加直接子选择器限定作用域：

   .container > .item:last-child { /* 只对外层直接子元素生效 */ }

   这样即使内部有 <div><div class="item"></div></div>，也不会被染上样式。

   可见元素中的“最后一个”为什么 CSS 选不到？

   :last-child 和 :last-of-type 都是结构伪类，它们只看 HTML 源码顺序，不感知 display: none、visibility: hidden 或 JS 动态增删。

   比如：

   <div><div class="abc">1</div><div class="abc">2</div><div class="abc" style="display:none">3</div></div>

   .abc:last-child 会匹配第 3 个（它是最后一个子节点），但你想要的是第 2 个——这种需求必须用 JavaScript 查找所有 .abc:not([style*="display:none"])，再给最后一个加 class，CSS 再针对这个 class 设样式。

   真正容易被忽略的，是结构优先于样式这个前提：写选择器前，先确认 DOM 层级是否干净、是否可控；依赖隐藏状态做样式判断时，就得接受 CSS 无能为力的事实。