是否有 CSS“haschildren”选择器？ [复制]答案

【问题标题】：Is there a CSS "haschildren" selector? [duplicate]是否有 CSS“haschildren”选择器？ [复制]
【发布时间】：2012-08-25 18:36:16
【问题描述】：

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

是否有一个 css 选择器我只能在子元素存在时使用？

考虑：

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

我只想将display:none 应用于 div，前提是它没有至少一个子 <li> 元素。

我可以使用任何选择器吗？

【问题讨论】：

不能使用 css，但可以使用 javascript
可以用纯 CSS 完成：div:not(:empty) { display: none }.

标签： css

【解决方案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 使这样的任务变得更容易，但是这一项任务不足以证明包含整个库。

【讨论】：

:empty 将来会表现得更自然（也更有帮助）。一旦浏览器实现了第 4 级选择器，:empty 将表示“除了可选的文档空白字符之外没有子元素的元素”。 drafts.csswg.org/selectors-4/#the-empty-pseudo

【解决方案2】：

不，很遗憾，CSS 选择器无法做到这一点。

【讨论】：

这里有一些背景信息：css-tricks.com/parent-selectors-in-css
一个简单的“否”并不能反映现代 CSS 的状态。请参阅下面 Tim Medora 的回答。
2021年好难过?

【解决方案3】：

不幸的是，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>

【讨论】：

我最喜欢这个，因为它非常紧凑。我将它与 not 选择器一起使用，例如： jQuery('.navbar-inner:not(:has(ul li))').css('display', 'none');

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

还有一个选择

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

【讨论】：