html - div(如果里面有另一个 div)+ div {}

Question

如何制定一个规则来做这样的事情:

.container .unit:first-child(if it has inside div.box1.extra) + .box2 { top: 50px;}

<div class="container">
   <div class="unit">
       <div class="box1 extra"><!-- content --></div>
   </div>

   <div class="unit">
       <div class="box1"><!-- content --></div>
   </div>

   <div class="box2"><!-- content --></div>                 
</div>

Answer 1

不幸的是，目前 CSS 无法做到这一点。你指的是使用 CSS 遍历 DOM。您所能做的就是简单地声明规则。

.container .unit:first-child .box1.extra + .box2 { top: 50px;}

如果 .box2 元素不存在，则什么都不会改变。对于具有 .box2 的单元，规则将适用。

编辑:请注意，这仅在 .box2 是 .unit 的子项时有效。如果 .unit 和 .box2 是 sibling ，不幸的是这是不可能的。