有条件地设置样式，如果兄弟元素存在于纯CSS中

Question

我有以下结构，其中第二个元素可能会出现也可能不会出现。

<div class="wrapper"> 
    <div class="firstElement"></div> 
    <div class="secondElement"></div> 
</div> 

我想在.firstElement只有当.secondElement存在有条件地设置样式。

有没有办法用PURE CSS做到这一点？与兄弟选择器/父母选择器？

谢谢！

Answer 1

一般来说，没有。 CSS向前/向下读取DOM - 它不会向后/向上读取。但有了这个标记，你可以使用:not(:last-child)

.firstElement:not(:last-child) { 
 
    color: red 
 
}

<div class="wrapper"> 
 
    <div class="firstElement">target this</div> 
 
    <div class="secondElement"></div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="firstElement">not this</div> 
 
</div>