CSS在div之后选择一个div

Question

我在登录页面上有这个代码：

<div id="header">
    <div id="homeBanner">
        ...
    </div>
</div>
<div id="navigation">
    ...
</div>

我想选择div＃navigation，但只有当它跟在包含div＃homeBanner的div＃header之后。原因是我在不同的页面上有类似的代码：

<div id="header">
    <div id="siteBanner">
        ...
    </div>
</div>
<div id="navigation">
    ...
</div>

我不希望影响div＃navigation的样式，当它跟在包含div＃siteBanner的div＃header之后。这有意义吗？

如果div＃navigation跟在包含div＃homeBanner的div＃header之后，我怎么选择它？我以为是：

div#header div#homeBanner > div#navigation

......但这似乎不起作用。

Answer 1

问题在于你是在尝试根据父母的孩子选择父元素的兄弟，这在CSS中是不可能的。

您最好的选择是根据该信息向#header（或甚至body）添加一个课程，然后使用该课程。

例如：

<div id="header" class="home">
    <div id="homeBanner">
        ...
    </div>
</div>
<div id="navigation">
    ...
</div>

使用此选择器（如其他人所述，对于兄弟姐妹使用+，而对子女使用>）：

#header.home + #navigation

Answer 2

请尝试以下代码：

div#header + div#navigation

使用+进行sibbling。