具有以下元素的CSS select元素

如何解决具有以下元素的CSS select元素

我试图选择2个Folloing元素的第一个元素，并且不允许更改HTML :(

例如：

span + span {
 border: red solid 1px;
}
<span>I wanna select this</span>
<span>not this</span>
<br>
<span>not this</span>
<br>
<span>I wanna select this</span>
<span>not this</span>

我知道我可以像这样span + span { border: red solid 1px; }获得第二个跨度
但是有没有办法得到第一个Element？

解决方法

请检查是否符合您的目的。

span:first-of-type{
border: 1px solid red;
}
.line-break + span:nth-of-type(2n){
border: 1px solid red;
}

<span>I wanna select this</span>
<span>not this</span>
<br class="line-break">
<span>not this</span>
<br class="line-break">
<span>I wanna select this</span>
<span>not this</span>

,

将其与父项包装在一起，并使用类似的选择器

.example span:first-child{}

,

如果容器中有两个元素，则它们的第一个是其父级的第一个子级，倒数第二个子级。因此，要仅选择此类容器的第一个子代，可以使用以下选择器：

span:first-child:nth-last-child(2) { ... }