Question

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

标记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>

“subject”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的元素，该元素位于类marker的元素之后并共享同一个父元素。

有一个关于兄弟等选择器here的优秀教程。

Answer 2

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

这应该适用于你的标记div的所有兄弟姐妹，但可能你想为每个其他div制作单独的选择器（因为你可能不希望所有东西都有“top：100px;”）

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

2 个答案: