css隐藏div如果div没有类的孩子

如果div没有具有特定类名的子div，可以用css隐藏div吗？css隐藏div如果div没有类的孩子

<div class="parent"> 
This div must be hidden 
</div> 

<div class="parent"> 
This div must be visible 
<div class="child"> 
child div 
</div> 
</div>

如果不可能用CSS，也许用javascript或jQuery？

来源

2011-08-04 FLY

不，小孩div也会被隐藏。你为什么想做这个？ – Drewid

我不认为你可以单独在CSS中做到这一点。但是，你可以用JavaScript来做到这一点。 – Shef

寻找像 '如果（.parent AND .parent有.child）隐藏this.parent（而不是其他父母），如果这使得它更清楚你Drewid。最好在css中完成，如果.parent已经或没有孩子，如果这可以让你在任何地方，甚至可以添加一个类名？ – FLY

我不认为这是可能的只有CSS，但它绝对有可能使用Javascript。

你必须
- 找到parent类的所有div
- 找到所有那些带班孩子的div child
- 如果没有这样的孩子，设置style.display = none

现在，纯javascript这可能有点复杂。您可以从this question使用getElementsByClassName，然后应用上面的逻辑：

//getElementsByClassName from @CMS's answer to the linked question 
var parentDivs = getElementsByClassName(document, "parent"); 
for(var i=0; i<parentDivs.length; i++) 
{ 
    var children = getElementsByClassName(parentDivs[i], "child"); 
    if(!children || children.length == 0) 
    { 
     parentDivs[i].style.display = "none"; 
    } 
}

随着jQuery，这是很多更简单：

$(".parent").each(function() 
{ 
    if($(this).children(".child").length == 0) 
    { 
     $(this).hide(); 
    } 
});

活生生的例子：http://jsfiddle.net/nivas/JWa9r/

来源

2011-08-04 11:29:35 Nivas

thnx。我已经做了一些更多的研究，并试图以另一种方式做到这一点（通过隐藏所有父项目，然后只显示有孩子的父母），但我必须得出结论，您不能使用CSS选择器来选择父项目。你只能选择元素本身或死者。 – FLY

由于CSS3，你可以使用：空选择器。这种方法得到了所有现代浏览器的广泛支持，并且比JavaScript的选择速度快得多。

来源

2014-09-09 12:36:49 Bosken85

但是'：empty'失败，如果'.parent'里面是任何文本（包括空格或换行符）。 –

css隐藏div如果div没有类的孩子

回答

相关问题