html - 是否有像 :empty 这样的 CSS 选择器，如果任何孩子有 display:none 则匹配？

Question

正如标题所说，这个片段：

.group {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.group:empty {
  background-color: red;
}

.hideme {
  display: none;
}

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

未能给出红色背景。:empty如果有孩子的话，是否有替代品display:none？

Answer 1

不，没有。反正我不知道。

最好的选择是 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 2

你可以试试

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

这将样式化而div.hideme不是样式化div.group

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

Answer 3

不幸的是，你不能单独使用 css 来实现它，但你可以使用 jquery 选择器:visible来代替。