只有子元素存在时,我才能使用css选择器吗?
考虑:
<div> <ul> <li></li> </ul> </div>
我只想display:none在div没有至少一个子<li>元素的情况下应用div 。
display:none
<li>
我可以使用的任何选择器吗?
甚至文本节点也将导致父节点不被认为是空的,因此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使这样的任务变得更容易,但是这一任务不足以包含整个库。