可能重复:
是否有CSS父选择器？
是否有一个css选择器我只能在子元素存在时使用？
考虑:
<div> <ul> <li></li> </ul> </div>
我想display:none只在它没有至少一个子<li>元素时才应用于div .
我可以用的任何选择器都可以吗？
Tim*_*ora 21
有点: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使这样的任务变得更容易,但是这个任务不足以包含整个库.
Thi*_*ter 15
不幸的是,使用CSS选择器是不可能的.
不幸的是，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>
| 归档时间： |
|
| 查看次数： |
35309 次 |
| 最近记录： |