(HTML) 通过 CSS 选择器选择下一个匹配元素？

Question

我在 selenium webdriver 中使用 CSS 选择器。

假设我有一个如下所示的 DOM：

<div class="test">
    <a class="example"> Comet </a>
</div>
<div class="test">
    <a class="example"> Asteroid </a>
</div>
<div class="test">
    <a class="example"> Planet </a>
</div>

假设我想将标签与“Asteroid”相匹配。如果我使用 CSS 选择器，我可以这样做：div.test > a.example

唯一的问题是这将匹配所有三个。使用 xpath，我可以执行如下操作：(//div/a[@class='example'])[2]这将告诉它选择第二个匹配元素。

有没有办法使用 CSS 选择器来做同样的事情？只需选择第二个或第三个匹配元素？我尝试过:nth-child()，但这似乎只适用于指定节点的子节点，并且似乎不像我给出的 xpath 示例那样工作，或者也许我做错了。

Answer 1

你是这个意思吗？

.test:nth-of-type(2) .example{color:red;}

<div class="test">
    <a class="example"> Comet </a>
</div>
<div class="test">
    <a class="example"> Asteroid </a>
</div>
<div class="test">
    <a class="example"> Planet </a>
</div>