Tricky CSS条件同级>子选择器>可以这样做吗？

在下面的标记中，我正在寻找一种方式（可能使用CSS选择器）来根据菜单的存在以不同的方式设置内容div的样式？菜单可能会或可能不会出现在该位置的标记中，如果它存在，我需要为内容添加一些顶部边距。Tricky CSS条件同级>子选择器>可以这样做吗？

我相信同胞和后代选择规则可能不会走这一步......

“当菜单呈现为标题的子集的内容，顶边（其母公司为头的兄弟姐妹）到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;}

来源

2010-09-30 Scott B

很确定你不能那样做，但是我又看到了一些非常疯狂的CSS规则。 – 2010-09-30 17:10:11

您可以制作条件选择器的唯一方法是基于伪类和媒体查询......您可以使用的目标和锚位于您想要选择的元素之前或甚至在页面的开头。 – esp 2013-01-25 21:11:50

不可能的。

CSS选择器只能查看祖先和兄弟轴。你不能往里看（“我有什么孩子”） - 只有向上（“我的父母是什么”）和侧身（“我旁边的东西”）。

例子。这：

div.header div.menu

是指其祖先是<div class="header">的任何<div class="menu">之一。

此：

div.header > div.menu

是指任何其<div class="menu">直接祖先（即 “父”）是一个<div class="header">。

此：

div.header ~ div.menu

指的是具有其前面的兄弟姐妹中的<div class="header">，任何<div class="menu">即，它们具有相同的父和发生一个接一个，但不一定彼此相邻（这是“侧视“）。

此：

div.header + div.menu

是指任何其<div class="menu">直接前述兄弟是<div class="header">。

CSS中没有其他的遍历选择器（这个语句引用CSS2），当然也没有条件。

来源

2010-09-30 17:11:41 Tomalak

你可以用兄弟选择器横向看 – esp 2013-01-25 19:51:34

@esp你是对的。我必须更新答案。 – Tomalak 2013-01-25 20:17:29

你可能会使用一些JavaScript来检测。检查菜单下，在负载报头，如果是，那么内容的边距设置为100像素

来源

2010-09-30 18:23:24 Ascherer

你可以使用jQuery：

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

不幸的是，:has()选择没有找到出路进入css3。

但你为什么不只是应用margin-bottom到div.menu？

来源

2010-09-30 18:50:23 nubbel

菜单是流出（绝对定位:) – 2010-09-30 20:37:49

我想为菜单上的内容提供一些空间，这是绝对定位在该空间中的菜单。如果菜单不存在，则不需要空间。 – 2010-09-30 20:40:05

我在条件格式中使用了这个CSS代码。通过从结束计数格式索引。

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

来源

2015-12-11 15:22:14

Tricky CSS条件同级>子选择器>可以这样做吗？

回答

相关问题