棘手的CSS条件兄弟>子选择器>可以这样做吗？

Question

在下面的标记中,我正在寻找一种方法(可能使用css选择器)来根据菜单的存在不同地设置内容div的样式？菜单可能会或可能不会出现在标记中的该位置,如果存在,我需要在内容中添加一些上边距.

我相信兄弟姐妹和后代选择者规则可能不会走得那么远......

"当菜单作为标题的子节点存在时,将内容的上边距(其父节点是标题的兄弟节点)设置为100像素.否则,将其设置为零"

<div class="header">
  <div class="sitetitle">site title</div>
  <div class="tagline">tagline</div>
  <div class="menu">menu</div>
</div>

<div class="main">
  <div class="content">content goes here</div>
</div>

如果css允许分组,我会这样做...

(.header ~ .menu) + (.main > .content) {margin-top:100px;}

Answer 1

在您的标记中不可能.

CSS选择器只能查看祖先和兄弟轴.你无法向内看("我有什么孩子") - 只有向上("我的父母是什么")和侧身("我的旁边是什么").

例子.这个:

div.header div.menu

指<div class="menu">祖先是a的任何一个<div class="header">.

这个:

div.header > div.menu

是指任何<div class="menu">其直接祖先(即"父")是一个<div class="header">.

这个:

div.header ~ div.menu

指任何<div class="menu">具有<div class="header">其先前兄弟姐妹的人,即他们具有相同的父母并且一个接一个地出现,但不一定彼此相邻(即"侧向看").

这个:

div.header + div.menu

是指任何<div class="menu">其直接前面的兄弟是一个<div class="header">.

CSS中没有其他遍历选择器(此语句引用CSS2),当然没有条件.