仅用CSS能否按类名定位最后一个嵌套子元素？

原代码示例 #

CSS #

.parent .child:last-child {
  color: red;
}

HTML #

<div class="parent">
  <div class="child">
  text
    <div class="child">
      text
      <div class="child">text</div>
    </div>
  </div>
</div>

原代码的问题在于，.parent .child:last-child会匹配所有在.parent后代里、是其父元素最后一个子元素的.child——也就是中间的那个.child（它是外层.child的最后一个子元素）和最内层的.child，导致这两个元素的文本都变红，不符合“仅最后一个嵌套子元素”的需求。

可以仅通过CSS实现，这里提供两种灵活的解决方案：

方案一：选中没有子.child的最内层元素 #

利用:has()伪类筛选出本身没有嵌套.child的.child元素，也就是最内层的目标元素：

.parent .child:not(:has(.child)) {
  color: red;
}

这个选择器只会选中最内层的.child，因为只有它里面没有再嵌套更多的.child子元素。

方案二：选中没有任何子元素的最内层元素 #

如果最内层的.child除了文本外没有其他子元素，也可以用:not(:has(*))来选择：

.parent .child:not(:has(*)) {
  color: red;
}

这种方式更通用，只要最内层元素没有子元素就会被选中，完全适配当前场景。

注意：:has()伪类在现代主流浏览器（Chrome、Firefox、Edge等）都已支持，旧版IE不支持。如果需要兼容极旧浏览器，可以考虑明确指定层级的选择器（比如.parent > .child > .child > .child），但这种方式不够灵活，层级变化后需要修改代码。

内容的提问来源于stack exchange，提问作者user3146945