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

【问题标题】：(HTML) Selecting the next matching element, by CSS selector?(HTML) 通过 CSS 选择器选择下一个匹配元素？
【发布时间】：2015-09-12 12:03:58
【问题描述】：

我在 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示例那样工作，或者我做错了。

【问题讨论】：

你的标题似乎在问一些完全不同的问题。在这里，您要问的是如何直接匹配特定元素，而不是当前选择中的下一个匹配元素。

标签： html css xpath css-selectors webdriver

【解决方案1】：

之所以选择孩子，是因为它应该是这样工作的。如果您将您拥有的内容包装在另一个 div 中，它将起作用。为了论证，如果您将代码包装在 div <div id="list"> 中，则可以按照您描述的方式使用 XPATH。

【讨论】：

【解决方案2】：

这是你的意思吗？

.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>

【讨论】：