Question

正如标题所说，这个

CSS

.group {
    width:100px;
    height:100px;
    background-color:blue;
}
.group:empty {
    background-color:red;
}
.hideme {
    display:none;
}

HTML

<div class="group">
    <div class="hideme">
        hello
    </div>
</div>

未能给出红色背景。是否有:empty的替代品，如果有任何子项display:none也会匹配？

Answer 1

不幸的是，单独使用css无法实现它，但您可以使用jquery selector :visible代替。

Answer 2

不，没有。不管怎么说，我不知道。

最好的选择是JavaScript ......因为我自己就是jQuery粉丝，你可以使用它。

$group = $('.group');

if( $group.find('.hideme').is(':visible') ) {

    $(this).parent().css({ 'background-color' : 'blue' });

} else {

    $(this).parent().css({ 'background-color' : 'red' });

}

这尚未经过测试，但基本逻辑应该非常清楚？

此外，当然不要忘记在HTML文档中包含jQuery库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 3

你可以尝试

div.group div.hideme
{
    background-color:red;
}

这会设置div.hideme的样式，而不是div.group的样式

否则您可以使用Javascript，因为其他答案已显示。

是否有一个CSS选择器，如：如果有任何子项显示，则匹配为空：none？

3 个答案: