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个元素。

Answer 2

不幸的是，没有任何此类 pseudo-class 来选择具有相同类型 的元素序列中的特定元素（在特定位置）< / em> 在文档的整个 BODY 的上下文中。因此，在这组特定示例中，您无法选择具有相同规范的所有元素的第二，即在此情况下 class=menu < strong>整个文档，但 DOM树的对象层次结构的单个级别即 下的所有此类元素都可以使用单亲 。

所以唯一的方法是通过JS：

代码

<script> onload=function() { obj=document.getElementsByClassName('menu')[1];//index=1 to access the 2nd object /* Do something with 'obj' */ } </script>

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

2 个答案:

代码