嵌套结构中通过.class选择last-of-type：<div>与<nav>的表现差异及疑问

使用

标签的情况 #

CSS代码 #

.super > .sub:last-of-type {
  background-color: turquoise;
}

HTML代码 #

<div class="super">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div>
    <div class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div>
    </div>
  </div>
</div>

使用

CSS代码 #

.super > .sub:last-of-type {
  background-color: turquoise;
}

HTML代码 #

<nav class="super">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <nav class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div>
    <nav class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div>
    </nav>
  </nav>
</nav>

疑问 #

1. 为何会出现这种表现差异？
2. 是否可以使用
   标签实现与

问题解答 #

1. 表现差异的原因 #

核心是last-of-type选择器的匹配逻辑：它**仅根据元素类型（如div、nav）**筛选父元素的直接子元素，和类名无关。

• 在<nav class="super">结构中，父元素的直接子元素是<div class="sub">和<nav class="super">，元素类型分别是div和nav，属于不同类型。此时.super > .sub:last-of-type会找父元素下所有div类型子元素里的最后一个，也就是第二个<div class="sub">，匹配成功。
• 在<div class="super">结构中，父元素的所有直接子元素都是div类型（包括.sub和嵌套的.super）。.super > .sub:last-of-type要找的是父元素下所有div子元素里最后一个带.sub类的，但父元素最后一个子元素是<div class="super">，不带.sub类，所以没有符合条件的元素，选择器失效。

2. 使用

标签实现相同效果的方法 #

可以通过两种CSS方案实现：

方法一：使用:nth-child(last of .sub)（现代浏览器支持）

该语法直接筛选父元素下所有带.sub类的子元素中的最后一个，不受元素类型限制：

.super > :nth-child(last of .sub) {
  background-color: turquoise;
}

方法二：使用:not()+通用兄弟选择器

通过匹配“后面没有其他同级.sub元素”的.sub，定位最后一个目标元素：

.super > .sub:not(.sub ~ .sub) {
  background-color: turquoise;
}

这两种方法都能在<div>嵌套结构中，选中每个.super下最后一个直接子元素.sub，效果和<nav>标签一致。

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