css - 如何编写自定义 css 以从多个匹配的网络元素中获取单个网络元素

Question

我有一个 cssSelector，它是 div.formErrorContent 但是有了这个，我需要找到 4 个匹配元素中的 4 个匹配元素。谁能帮帮我？

我知道如何编写 xpath 与 :

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

但我想要 css 定位器。

Answer 1

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

A. 使用 :first-child 选择器或 :nth-child 选择器仅当具有相同类的 4 个 div 都是子级时才有效属于同一容器，并且是该容器内唯一的容器

请看下面的代码片段

#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;
}

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

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

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

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

</div>
</div>

B. 或者如果您在该容器中有更多元素，您可以选择具有该类的第一个 div，具体取决于它之前的元素(CSS = 级联样式表，因此您只能选择从 HTML 结构的顶部到底部，而不是相反 )

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

p + .formErrorContent { background:green }

请看下面的片段:

#wrapper {
  background:blue
}
p { 
color:white
}

.formErrorContent{
  height:100px;
  background:red;
  width:100px;
}
p + .formErrorContent { 
background:green;
}

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

我想指出的是，有很多方法可以实现您想要的，但这取决于html 结构