如何通过 CSS 选择器从元素列表中正确选择第 n 个元素答案

【问题标题】：How to properly select nth element from the list of elements by CSS selector如何通过 CSS 选择器从元素列表中正确选择第 n 个元素
【发布时间】：2021-05-24 22:48:07
【问题描述】：

我是 Selenium 和 Java 的新手，我正在尝试通过 CSS 选择器选择 nth 元素。

我想从下面的代码中获取所需的值并将它们保存以供进一步使用。我已经成功使用了看起来像这样的 XPATH

//*[@class='search-result__advert' and not(@id)][i]（i = 第 n 个元素）

我正在尝试通过 CSS 选择器获取值，但我想出了这个（没有按预期工作）

.search-result__advert:not([id]):not([data-ad-show]):nth-child(i)（我也试过:nth-of-type(i)）

我对@987654325@ 的期望：第三个没有id属性且没有data-ad-show属性的元素被选中，其值为Desired value 3。 p>

相反，我得到 org.openqa.selenium.NoSuchElementException: Unable to locate element: .search-result__advert:not([id]):not([data-ad-show]):nth-child(3) 它适用于 i=1、i=2、i=5。

<ul class="search-result list-unstyled">

    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>Desired value 1</p>
        </div>
    </li>
    
    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>Desired value 2</p>
        </div>
    </li>      

    <li class="search-result__advert" id="signUpWrapper">
        <div id="signUpSavedSearch" class="grid">
            <p>Advertisment 1</p>
        </div>
    </li>

    <li class="search-result__advert hidden" data-ad-show="ad_list_middle">
        <div class="ad" id="ad_list_middle">
            <p>Advertisment 2</p>
        </div>
    </li>

    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>Desired value 3</p>
        </div>
    </li>

    <li class="search-result__advert">
        <div class="grid grid--rev">
            <p>etc. etc.</p>
        </div>
    </li>
</ul>

【问题讨论】：

标签： java html css selenium

【解决方案1】：

你可以只使用 CSS 选择器

ul.search-result div.grid--rev

这会过滤掉所有广告。现在您可以使用代码来遍历列表，而不必依赖使用定位器进行迭代。

【讨论】：

我已经以某种方式为 xpath 编写了代码，所以我不会更改它，但下次我将使用您提出的解决方案，因为它对我来说似乎最优雅。谢谢！

【解决方案2】：

等效的 css 选择器是：

li.search-result__advert:not(id):nth-last-child(2)

如果您申请nth-child，为了更好地理解，您可以查看以下内容：

:nth-child(n)   p:nth-child(2)  Selects every <p> element that is the second child of its parent

阅读更多关于 CSS_SELECTOR here

【讨论】：

感谢您的回答，但如果我这样做 li.search-result__advert:nth-child(3) 它会选择我试图避免的 广告 1
@leafHM : 已更新定位器，请再次检查。
谢谢，这可以通过选择 Desired value 3 来完成。如何更改选择器以使其也适用于其他 Desired 值？我想选择 Desired value 1 和 Desired value 2 通过使用 i like i=1 => first value, i=2 => second value etc.
如果你注意我们使用的是nth-last-child，所以如果你想选择Desired value 1 你可以使用这个li.search-result__advert:not(id):nth-last-child(6)，对于Desired value 2使用li.search-result__advert:not(id):nth-last-child(5)
是的，我明白了。现在，如果我使用选择器 li.search-result__advert:not(id):nth-last-child(2) 并更改数字，它仍然会选择广告。例如，如果我使用li.search-result__advert:not(id):nth-last-child(4)，则选择了 Advertisment 1。这似乎很奇怪，因为 <li> 具有 id 属性。为了可视化它，我使用了 Chrome 的 SelectorGadget。

【解决方案3】：

我猜正确的css选择器应该是

.search-result__advert:not(id):not(data-ad-show):nth-last-child(i)

【讨论】：

您好，感谢您的回答，但如果我这样做，它仍然会出于某种原因选择广告。它还从底部选择元素。