有没有CSS“haschildren”选择器？

可能重复：
Is there a CSS parent selector?有没有CSS“haschildren”选择器？

是否有一个CSS选择器，如果一个子元素存在，我只能用？

考虑：

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

我想申请display:none到div的，只有当它不具有至少一个孩子<li>元素。

我可以使用的任何选择器做到这一点吗？

来源

2012-08-30 Chaitanya

不可能用CSS，但可以用JavaScript – Ibu

不幸的是，不幸的是，这是不可能的CSS选择器。

来源

2012-08-30 23:18:27 ThiefMaster

这里的一些背景资料：https://css-tricks.com/parent-selectors-in-css/ – Typoheads

排序，与: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-30 23:22:09

不幸的是，CSS还没有任何父规则，如果您必须仅应用它，那么只有包含特定孩子的父母才会使用Javascript，或者更容易使用名为jQuery的JavaScript库。

的Javascript可以写在一个similair方式CSS中someways，为您的例子中，我们将在我们的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-30 23:23:34

我喜欢这是最紧凑的一个。我将它与非选择器一起使用，如：jQuery（'。navbar-inner：not（：has（ul li））''。css（'display'，'none'）; –

如果使用jQuery的，你可以尝试一下这个功能

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

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

来源

2012-08-30 23:23:40 Infinity

还有另一种选择

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

来源

2012-08-30 23:39:23

有没有CSS“haschildren”选择器？

回答

相关问题