多个元素的 CSS 选择器的索引答案

【问题标题】：Index for CSS selector for multiple elements多个元素的 CSS 选择器的索引
【发布时间】：2015-12-16 16:15:09
【问题描述】：

我有以下代码。如您所见，我所有的div 元素都具有相同的class name。我想通过 CSS 选择器选择第三个 div 元素。我找不到任何办法。 nth-child(n) 用于子元素（子元素）。有什么想法吗？

<div class="linkDisplayStyle"> <a href="#1"> </div>
<div class="linkDisplayStyle"> <a href="#2"> </div>
<div class="linkDisplayStyle"> <a href="#3"> </div>
<div class="linkDisplayStyle"> <a href="#4"> </div>
<div class="linkDisplayStyle"> <a href="#5"> </div>
<div class="linkDisplayStyle"> <a href="#6"> </div>

【问题讨论】：

html文档中除html元素本身外的每个元素都有一个父节点。
By.cssSelector(".linkDisplayStyle:nth-of-type(2)") 应该可以帮助您。 nth-of-type 是一个基于 0 的索引，因此输入 2 将返回第 3 个元素。

标签： html selenium css-selectors

【解决方案1】：

nth-child 在您在父节点下查找子节点时起作用。为了向您展示一个示例，我想出了以下内容

.parent>div:nth-child(3)

HTML

<div class="parent"> 
    <div class="linkDisplayStyle"> <a href="#1"> </div>
    <div class="linkDisplayStyle"> <a href="#2"> </div>
    <div class="linkDisplayStyle"> <a href="#3"> </div>
    <div class="linkDisplayStyle"> <a href="#4"> </div>
    <div class="linkDisplayStyle"> <a href="#5"> </div>
    <div class="linkDisplayStyle"> <a href="#6"> </div>
</div>

【讨论】：

【解决方案2】：

您可以使用nth-child(3) 选择第三个元素。你也可以使用nth-of-type(3)。

.linkDisplayStyle {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: red;
  float: left;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
}
.linkDisplayStyle:nth-of-type(3) {
  background: green;
}
.linkDisplayStyle a {
  color: white;
  text-decoration: none;
}

<div class="linkDisplayStyle">
  <a href="#1">1</a>
</div>
<div class="linkDisplayStyle">
  <a href="#2">2</a>
</div>
<div class="linkDisplayStyle">
  <a href="#3">3</a>
</div>
<div class="linkDisplayStyle">
  <a href="#4">4</a>
</div>
<div class="linkDisplayStyle">
  <a href="#5">5</a>
</div>
<div class="linkDisplayStyle">
  <a href="#6">6</a>
</div>

【讨论】：