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">个祖先为<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），当然没有条件。

Answer 2

你可以使用jQuery：

$('.header:has(.menu) + .main > .content').css('margin-top', '100px');

不幸的是:has()选择器没有进入css3。

但为什么不简单地将margin-bottom应用于div.menu？

Answer 3

您可以使用一些javascript来检测它。在加载时检查菜单是否在标题下，如果是，则将内容的margin-top设置为100px

Answer 4

我在条件格式中使用了这个CSS代码。从结尾开始计算格式索引。

#stk-service-account-menu ul li:nth-last-child(1):before {

棘手的CSS条件兄弟＆gt;儿童选择器＆gt;可以这样做吗？

4 个答案: