如何从 CSS 选择器中选择第 n 个项目答案

【问题标题】：how to select nth item from a CSS selector如何从 CSS 选择器中选择第 n 个项目
【发布时间】：2020-09-15 21:44:55
【问题描述】：

[data-short-caption="itemName" i] .circle-base,

这个选择器正在识别 DOM 中的两个项目，我需要选择第二个项目，有没有像我们在 xpath 中那样选择第二个项目的方法？

HTML 结构是这样的：

<div class="selection" data-select-item="select-item">
    <div data-short-caption='itemName'>
      <div class=circle-base> </div>
    </div>
    
    <div data-short-caption='itemName'>
     <div class=circle-base> </div>
    </div>
</div>

【问题讨论】：

标签： selenium css-selectors jsoup

【解决方案1】：

根据 HTML：

<div class="selection" data-select-item="select-item">
    <div data-short-caption='itemName'>
      <div class=circle-base> </div>
    </div>

    <div data-short-caption='itemName'>
     <div class=circle-base> </div>
    </div>
</div>

要仅识别第二个项目，您可以使用以下基于Locator Strategy 的css-selectors 之一：

使用nth-child()：

div.selection div:nth-child(2) > div.circle-base

使用nth-of-type()：

div.selection div:nth-of-type(2) > div.circle-base

【讨论】：

非常抱歉，我应该添加HTML代码，现在你会更好地理解。
@Sanat 您还需要向我们展示父节点，即更多的外层HTML。
已更新，麻烦您了。
并且要记住的关键点是，我们需要引用itemName，因为dom中还有其他项目。
@Sanat 查看答案更新并告诉我状态。

【解决方案2】：

如果我能正确理解您的查询，有几种方法可以通过 css 伪选择器来实现。如果有帮助，请检查代码。

/*Method 1 : using last-of-type pseudo-selector*/
[data-short-caption="itemName" i]:last-of-type .circle-base{
  background-color: #efefef;
}
/*Method 2 : using last-child pseudo-selector*/
[data-short-caption="itemName" i]:last-child .circle-base{
  background-color: #efefef;
}
/*Method 3 : using nth-of-type pseudo-selector*/
[data-short-caption="itemName" i]:nth-of-type(2) .circle-base{
  background-color: #efefef;
}
/*Method 4 : using nth-child pseudo-selector*/
[data-short-caption="itemName" i]:nth-child(2) .circle-base{
  background-color: #efefef;
}

<div class="selection" data-select-item="select-item">
    <div data-short-caption='itemName'>
      <div class=circle-base> first child </div>
    </div>
    
    <div data-short-caption='itemName'>
     <div class=circle-base> second child </div>
    </div>
</div>

【讨论】：