<分区>
Possible Duplicate:
Is there a CSS parent selector?
是否有仅当子元素存在时我才可以使用的 css 选择器？
考虑:
<div> <ul> <li></li> </ul> </div>
我要申请display:none仅当它没有至少一个 child 时才分配给 div <li>元素。
我可以使用任何选择器来做到这一点吗？
标签 css
<分区>
Possible Duplicate:
Is there a CSS parent selector?
是否有仅当子元素存在时我才可以使用的 css 选择器？
考虑:
<div> <ul> <li></li> </ul> </div>
我要申请display:none仅当它没有至少一个 child 时才分配给 div <li>元素。
我可以使用任何选择器来做到这一点吗？
最佳答案
有点像 :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 - 是否有 CSS "haschildren"选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12206935/