条件CSS:如果兄弟姐妹的div存在,那么

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:不是与简单选择器s不匹配的E元素

edit :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;
}