css - Tricky CSS conditional sibling > child selector > 这可以做到吗？

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 选择器只能查看祖先轴和兄弟轴。你不能向内看(“我有什么 child ”) - 只能向上看(“我的 parent 是什么人”)和侧面(“我旁边的人”)。

例子。这:

div.header div.menu

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

这个:

div.header > div.menu

指的是任何 <div class="menu">其直接祖先(即“ parent ”)是<div class="header"> .

这个:

div.header ~ div.menu

指的是任何 <div class="menu">有一个<div class="header">在其前面的 sibling 中，即它们具有相同的父级并且一个接一个地出现，但不一定彼此相邻(即“从侧面看”)。

这个:

div.header + div.menu

指的是任何 <div class="menu">其直接前面的 sibling 是<div class="header"> .

CSS中没有其他的遍历选择器(这个说法指的是CSS2)当然也没有条件。