Html

vs

我认为你的困惑在于，:last-of-type可以被认为是"标签的最后"，而不是" Select 者的最后".

所以，当你做.sub:last-of-type并且你使用所有的div时，你实际上是在说"最后一个也有类.sub的div".让我们再看一遍您的代码:

<div class="super">
  <div class="sub">1</div>
  <div class="sub">2</div> <!-- this is not the last DIV -->
  <div class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div> <!-- this is not the last DIV -->
    <div class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div> <!-- this IS the last DIV -->
    </div>
  </div>
</div>

在上面的例子中，您有两个div，它们不是DIV类型的最后一个，即使它们是类为.sub的最后一个类型--这不是:last-of-type Select 器的目标.这很让人困惑.

当您使用NAV时，这.sub个元素确实是"DIV"类型的最后一个元素:

<nav class="super">
  <div class="sub">1</div>
  <div class="sub">2</div> <!-- this is the last of type DIV -->
  <nav class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div> <!-- this is the last of type DIV -->
    <nav class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div> <!-- this is the last of type DIV -->
    </nav>
  </nav>
</nav>

UPDATE (from comments):我的建议是对.super个元素使用除DIV之外的任何标记，就像上面的nav个标记所做的那样.你甚至可以创建自己的custom elements个.

Op最终找到了一个仅支持css的解决方案，我在他们的要求下发布了这个解决方案，尽管我个人发现它很难阅读和理解.尽管如此，这仍然是一个聪明的解决方案:

.super > .sub:has(+ .super), 
.super > .sub:last-child { 
  background-color: turquoise; 
}