是否有CSS“ haschildren”选择器?

只有子元素存在时,我才能使用css选择器吗?

考虑:

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

我只想display:none在div没有至少一个子<li>元素的情况下应用div 。

我可以使用的任何选择器吗?

回答:

甚至文本节点也将导致父节点不被认为是空的,因此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;

}

如果您执行脚本路线:

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

以上是 是否有CSS“ haschildren”选择器? 的全部内容, 来源链接: utcz.com/qa/435320.html

回到顶部