问题描述
我试图选择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) { ... }