28

可能重复：
是否有 CSS 父选择器？

是否只有当存在子元素时才能使用 css 选择器？

考虑：

<div> <ul> <li></li> </ul> </div>

display:none只有当 div 没有至少一个子<li>元素时，我才想申请它。

我可以使用任何选择器来执行此操作吗？

4

5 回答 5

30

有点，: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 使这样的任务变得更容易，但是这一项任务不足以包含整个库。

于 2012-08-30T23:22:09.707 回答
20

不，不幸的是，CSS 选择器无法做到这一点。

于 2012-08-30T23:18:27.447 回答
4

不幸的是，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>
于 2012-08-30T23:23:34.247 回答
2

如果你使用jquery，你可以试试这个功能

jQuery.fn.not_exists = function(){
    return this.length <= 0;
}

if ($("div#ID > li").not_exists()) {
    // Do something
}
于 2012-08-30T23:23:40.687 回答
2

还有另一种选择

$('div ul').each(function(x,r) {
    if ($(r).find('li').length < 1){
        $(r).css('display','block'); // set display none
    }
})
于 2012-08-30T23:39:23.343 回答