有没有CSS“haschildren”选择器？
可能重复：
有没有一个CSS父母选择器？
有没有一个CSS选择器我只能使用一个子元素存在？
考虑：
<div> <ul> <li></li> </ul> </div>
我想仅在没有至少一个<li>元素的情况下将display:none应用于div。
我可以使用任何选择器来做这件事
不幸的是，不幸的是，这对于CSS选择器来说是不可能的。
排序，与:empty但它是有限的。
例如：http://jsfiddle.net/Ky4dA/3/
即使是文本节点也会导致父母不被视为空，因此DIV内的UL会阻止DIV匹配。
<h1>Original</h1>
<div><ul><li>An item</li></ul></div>
<h1>No Children - Match</h1>
<div></div>
<h1>Has a Child - No Match</h1>
<div><ul></ul></div>
<h1>Has Text - No Match</h1>
<div>text</div>
DIV {
background-color: red;
height: 20px;
}
DIV:empty {
background-color: green;
}
参考：http://www.w3.org/TR/selectors/#empty-pseudo
如果你去脚本路线：
// pure JS solution
var divs = document.getElementsByTagName("div");
for( var i = 0; i < divs.length; i++ ){
if( divs[i].childNodes.length == 0 ){ // or whatever condition makes sense
divs[i].style.display = "none";
}
}
当然，jQuery使这样的任务变得更容易，但是这个任务不足以包含整个库文件。
不幸的是，CSS还没有任何父规则，唯一的办法就是如果你必须应用它，只有包含特定孩子的父母才能使用Javascript，或者更容易使用名为jQuery的JavaScript库。
JavaScript可以用类似的方式写成CSS，例如我们可以在HTML页面的底部做这样的事情：
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
（为此，您需要将jQuery库包含在文档中，只需将以下内容放入<head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>