Question

我有一个cssSelector div.formErrorContent但是有4个匹配的元素，我需要找到第一个元素。任何人都可以帮助我吗？

我知道如何写xpath与：

相同

(//div[@class='formErrorContent'])[1]

但我想要css定位器。

Answer 1

没有你提供的任何html结构，我做了两个简单的例子。

A。选择:first-child选择器或:nth-child只有当具有相同类的4个div都是同一个容器的子项时才有效，并且是唯一的容器

请参阅下面的代码段

＆＃13;

#wrapper {
  background:blue
}
.formErrorContent{
  height:100px;
  background:red;
  width:100px;
}
.formErrorContent:first-child {
  background:green;
}
.formErrorContent:nth-child(2) {
  background:yellow;
}
.formErrorContent:nth-child(3) {
  background:white;
}
.formErrorContent:last-child {
  background:black;
}

＆＃13;

<div id="wrapper">
<div class="formErrorContent">

</div>
<div class="formErrorContent">

</div>
<div class="formErrorContent">

</div>
<div class="formErrorContent">

</div>
</div>

＆＃13;

B。或者如果您在该容器中有更多元素，则可以根据您之前的元素选择该类的第一个div（CSS =级联样式表，以便您只能选择从HTML结构的顶部到底部，而不是其他方式）

例如，如果您在p之前有一个.formErrorContent元素，则应使用兄弟连接器+，如此

p + .formErrorContent { background:green }

请参阅以下代码段：

＆＃13;

#wrapper {
  background:blue
}
p { 
color:white
}

.formErrorContent{
  height:100px;
  background:red;
  width:100px;
}
p + .formErrorContent { 
background:green;
}

＆＃13;

<div id="wrapper">
<p>
This is a p element sibling of the other divs in this container
</p>
<div class="formErrorContent">

</div>
<div class="formErrorContent">

</div>
<div class="formErrorContent">

</div>
<div class="formErrorContent">

</div>
</div>

＆＃13;

我想指出的是，有很多方法可以达到你想要的效果，但这取决于 html结构

如何编写自定义css以从多个匹配的webelements中获取单个webelement

1 个答案: