用于定位不在同一父级内的第二个元素的选择器

Question

给出以下HTML：

<div>
    <span class="my-class">One</span>
</div>
<div>
    <span class="my-class">Two</span>
</div>

我可以使用类别属性my-class使用CSS选择器来仅定位第二个跨度（<span class="my-class">Two</span>）吗？请注意，<span> s位于不同的<div> s。

我已尝试过.my-class:nth-child(2)和.my-class:nth-of-type(2)，但这些都无效。如果可能的话，我也想避免使用XPath。

Answer 1

您需要使用:nth-child定位第二个div，然后在其中找到您想要的课程：

＆＃13;

＆＃13;

div:nth-child(2) .my-class{
  background: red;
}

＆＃13;

<div>
    <span class="my-class">One</span>
</div>
<div>
    <span class="my-class">Two</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用:nth-child和:nth-of-type伪类选择器，您的目标是兄弟姐妹。换句话说，元素必须具有相同的父元素。

.my-class:nth-child(2)和.my-class:nth-of-type(2)将无法正常工作，因为您的目标是div容器内的第二个元素，该元素不存在。

由于两个div都是兄弟姐妹（body的子女），请考虑定位第二个div：

div:nth-child(2) > .my-class

Answer 3

@koala_dev的答案的补充，如果你想避免使用XPath，你可以给每个范围提供id属性来捕获它们。如果您使用的是脚本语言，则可以使用循环打印<span>，并且可以设置每个循环变量的id。例如

＆＃13;

＆＃13;

#span-2{
  background:red;
  }

＆＃13;

<div>
       <span class="my-class" id="span-1">One</span>
    </div>
    <div>
       <span class="my-class" id="span-2">Two</span>
    </div>

＆＃13;

＆＃13;

＆＃13;