CSS在div之后选择一个div

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

<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#heading包含div#homeBanner时选择div#navigation？我以为是：

div#header div#homeBanner > div#navigation

……但这似乎不起作用.

解决方法

这里的问题是你试图根据父亲的孩子选择父元素的兄弟,这在CSS中是不可能的.

最好的办法是根据该信息向#header(甚至是body)添加一个类,然后使用该类.

例如：

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

使用此选择器(如其他人所述,用于兄弟姐妹,而不是用于儿童)：

#header.home + #navigation