有条件的CSS（如果div存在，set top = x，else，set top = y）

Question

我在我的标记中有一个相对定位的div（称为“marker”），它影响了兄弟姐妹的绝对顶部“y”位置定位的子div（称之为“主题”）。

标记div可能存在也可能不存在于标记中。我怎样才能为兄弟的div div编写css，当标记div出现在标记中时，它的顶部位置会增加100px。

这里的标记在标记的div存在...

<div class="wrapper"> 
    <div class="marker"></div> 
    <div class="content"></div> 
    <div class="sidebar"> 
     <div class="subject"></div> 
    </div> 
</div> 

“主题”的div是一个我需要在CSS定义的条件的高度。

这里的标记在标记的div不存在...

<div class="wrapper"> 
    <div class="content"></div> 
    <div class="sidebar"> 
     <div class="subject"></div> 
    </div> 
</div> 

Answer 1

是否以下工作？

.sidebar .subject { top: 0px; } 
.marker ~ .sidebar .subject { top: 100px; } 

~是相邻的兄弟选择器; .marker ~ .sidebar匹配类sidebar中的一个元素，该元素位于类的元素之后并共享相同的父级。

有一个很好的兄弟姐妹等教程选择here。

Answer 2

#wrapper > div.marker ~ div { top: 100px; } 

这应该适用于您的标记DIV的所有兄弟姐妹，但可能要进行单独选择对每个其他分区（因为那时你不想要的一切有“顶：100像素;”）