css - 使用 html 标记顺序选择第 nth-of-type

Question

html 标记可能会有所不同，如以下示例 .menu 所示:

<div id="main">
  <div></div>
  <div class="menu"></div>
  <div class="menu"></div>
</div>

为此我可以使用 .menu:last-child 但如果是这样的话:

<div id="main">
  <div></div>
  <div class="menu"></div>
  <div>
    <div class="menu"></div> <!--- selecting this----->
  </div>
</div>

或者，这样说:

<div id="main">
  <div></div>
  <div class="menu"></div> <!-- count as 1--->
  <div>
    <div>
      <div class="menu"></div> <!--- selecting this-----> <!-- count as 2 ---->
      <div class="menu"></div> <!-- count as 3---->
    </div>
  </div>
</div>

因此，我想将 .menu 作为目标，无论它是父级、子级还是兄弟级，但最后标记为 html 或类似于 nth-of-type。有什么想法吗？

---

我的意思是我想要作为类名的类型。

Answer 1

第 nth-of-type 将为您提供与所选元素相同类型的第 n 个兄弟元素。

当您处理同一父项中的不同元素类型并且您只想选择特定类型的第一个/最后一个或第 n 个元素时，应使用此选项。