Question

可能重复：
Is there a CSS parent selector?

我是否只有在存在子元素的情况下才能使用css选择器？

考虑：

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

我想将display:none仅应用于div，如果它没有至少一个子<li>元素。

我可以使用的任何选择器都可以这样做吗？

Answer 1

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

Answer 2

不幸的是，CSS选择器无法实现这一点。

Answer 3

遗憾的是，CSS还没有任何父规则，如果你必须只应用它，那么只有包含特定子项的父项才能使用Javascript，或者更容易使用名为{{3}的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>

Answer 4

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

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

if ($("div#ID > li").not_exists()) {
    // Do something
}

Answer 5

还有另一种选择

$('div ul').each(function(x,r) {
    if ($(r).find('li').length < 1){
        $(r).css('display','block'); // set display none
    }
})

有没有CSS“haschildren”选择器？

5 个答案: