是否有 CSS“haschildren”选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12206935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS "haschildren" selector?
提问by Chaitanya
Possible Duplicate:
Is there a CSS parent selector?
可能的重复：
是否有 CSS 父选择器？
Is there a css selector I can use only if a child element exists?
是否有仅当存在子元素时才能使用的 css 选择器？
Consider:
考虑：
<div> <ul> <li></li> </ul> </div>
I would like to apply display:noneto div only if it doesn't have at least one child <li>element.
display:none只有当它没有至少一个子<li>元素时，我才想申请div 。
Any selector I can use do this?
我可以使用任何选择器来做到这一点？
采纳答案by ThiefMaster
Nope, unfortunately that's not possible with CSS selectors.
不，不幸的是，这对于 CSS 选择器是不可能的。
回答by Tim Medora
Sort of, with :emptybut it's limited.
有点，:empty但它是有限的。
Example: http://jsfiddle.net/Ky4dA/3/
示例：http: //jsfiddle.net/Ky4dA/3/
Even text nodes will cause the parent to not be deemed empty, so a UL inside the DIV would keep the DIV from being matched.
即使是文本节点也会导致父节点不被视为空，因此 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;
}
Reference: http://www.w3.org/TR/selectors/#empty-pseudo
参考：http: //www.w3.org/TR/selectors/#empty-pseudo
If you go the script route:
如果你走脚本路线：
// 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";
}
}?
Of course, jQuery makes a task like this easier, but this one task isn't sufficient justification to include a whole libary.
当然，jQuery 使这样的任务变得更容易，但是这一项任务不足以证明包含整个库。
回答by Alexander Wigmore
CSS does not (yet) have any parent rules unfortunately, the only way around it if you must apply it only parents that contain a specific child is with the Javascript, or more easily with a library of javascript called jQuery.
不幸的是，CSS (还) 没有任何父规则，如果您必须仅应用包含特定子项的父项，则唯一的解决方法是使用 Javascript，或者更容易使用名为jQuery的 javascript 库。
Javascript can be written in a similair way to CSS in someways, for your example we would do something like this at the bottom of our HTML page:
Javascript 可以在某些方面以类似于 CSS 的方式编写，对于您的示例，我们将在 HTML 页面的底部执行以下操作：
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
(For this you would need to include the jQuery library in your document, simply by putting the following in your <head></head>
（为此，您需要在文档中包含 jQuery 库，只需将以下内容放入 <head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
回答by Infinity
If you use jquery, you can try out this function
如果你使用jquery，你可以试试这个功能
jQuery.fn.not_exists = function(){
return this.length <= 0;
}
if ($("div#ID > li").not_exists()) {
// Do something
}
回答by Zach dev
There is another option
还有另一种选择
$('div ul').each(function(x,r) {
if ($(r).find('li').length < 1){
$(r).css('display','block'); // set display none
}
})
