如何选中嵌套元素中最后一个子元素的最后子元素？CSS选择器问题

嘿，我来帮你搞定这个选择器的困扰！咱们先拆解一下你的DOM结构，再看看问题出在哪，最后给出正确的写法。

首先看你的DOM结构：

<div class="block"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div> 
    <div></div> 
    <div></div> 
    <div>this one</div> 
  </div> 
</div>

你用的.block:last-child:last-child之所以没用，是因为：

• .block:last-child 是在找某个父元素里的最后一个子元素，且这个子元素拥有.block类，但你的.block本身就是最外层容器，它的父元素（如果有的话）里的最后一个子元素不一定是它，而且连续写两个:last-child完全没必要，效果和写一个是一样的。
• 这个选择器根本没定位到.block内部的嵌套元素，自然选不到目标的“this one”。

正确的选择器写法 #

要精准选中那个文本为“this one”的div，你需要逐层定位：

.block > :last-child > :last-child

咱们拆解一下这个选择器的逻辑：

1. .block：先定位到最外层的容器div
2. > :last-child：选中.block的直接子元素里的最后一个（也就是那个包含三个子div的内层div）
3. > :last-child：再选中这个内层div的直接子元素里的最后一个，也就是你要找的“this one”元素

如果你的DOM结构不会有更深的嵌套，也可以用后代选择器（去掉>），但直接子元素选择器>更安全，能避免意外选中其他层级的元素：

.block :last-child:last-child

验证一下 #

把这个选择器用在你的DOM上，就能精准匹配到目标元素啦！

内容的提问来源于stack exchange，提问作者abdelhak.ajbouni