根据孩子的状态将样式应用于父块

Question

使用以下块结构：

<div class="container">
    <div class="title"></div>
    <div class="subject"></div>
</div>

是否可以隐藏（显示：无）.container如果它的孩子.subject为空？ 谢谢！

Answer 1

嗯......您可以尝试伪造它...制作标题position: absolute并且对于容器集overflow: hidden;容器本身只有在您将某些内容放入.subject标记时才会显示。像这样： jsfiddle example

Answer 2

我相信你必须使用javascript来做到这一点。在jQuery中：

$(".container").each( function() {
    if ( $(this).children('.subject').html() == '' ) {
           $(this).hide();
    }
} );

示例：http://jsfiddle.net/m5jjs/

Answer 3

如果元素没有节点，则可以使用

:empty伪类。需要通过JS。

$(".container *") {
   if($.trim($(this).html()).length == 0 && $.trim($(this).text()).length == 0 ) {
     $(".container").css({ "display" : "none" });
   }
});

Answer 4

目前在我所知道的任何浏览器中都无法在纯CSS中使用。

如果项目中已经有jQuery依赖项，那么cssParentSelector中即将出现的父选择器有一个jQuery插件CSS Selectors Level 4 polyfill。