Question

在下面的html片段中，我希望“main”div仅在标记中不存在“menu”div时才有背景图像。这可能吗？

<div class="header">
    <div class="siteTitle">site title</div>
    <div class="tagline">site tagline</div>
    <div class='menu'></div>
</div>
<div class="main"></div>

Answer 1

http://www.w3.org/TR/css3-selectors/

E + F匹配前面有兄弟元素E的任何F元素。 E：不是与简单选择器不匹配的E元素

编辑 :not使用了一个简单的选择器，所以不幸的是，你不能用它来过滤子元素的属性，只过滤元素的属性。

简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

但是你可以在菜单上放一个.empty类并仍然使用它。

.header .menu:not(.empty) + .main {
   background:pink;
}

这个解决方案是两个世界中最好的，javascript但按正常情况使用css。

的javascript：

if ($('.menu').length == 0){
    $('body').addClass('no_menu');
}

css：

body.no_menu .main{
    background:pink;
}

Answer 2

我看到的唯一纯css解决方案只有在您重新排列html时才有可能：

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

然后您可以使用此css仅应用属性）：

.menu { background: none }
.menu ~ .main{ background: url() } /* or .menu + .main if they are guaranteed to be adjacent to each other on the code */

在此示例中，您可以在工作中看到它：http://jsfiddle.net/tYhxr/
（通过删除菜单div并再次运行来测试它）

检查Keyo's asnwer以获取有关选择器如何工作的链接。

如果您无法更改html，则可以使用javascript。

我希望这会有所帮助。

Answer 3

您可以向主<div>添加第二个课程，该课程仅用于添加您想要的背景。然后，当您创建标记时，如果需要，只需将第二个类说明符添加到<div>，如果不需要，则省略它。

div.main {
  //main stuff
}

div.mainbg {
  background: *background-specifications*;
}

当您的菜单div存在时，您可以使用：

<div class="main mainbg">

当它丢失时，你会坚持：

<div class="main">

条件CSS：如果兄弟姐妹的div存在，那么

3 个答案: