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

Question

具有以下块结构：

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

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

Answer 1

好吧...您可以尝试伪造它...使标题position: absolute和容器集overflow: hidden;容器本身只有在您将某些内容放入 .subject 标记时才可见。像这样： jsfiddle示例

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 依赖项，那么在CSS 选择器级别 4中有一个 jQuery 插件cssParentSelector polyfill用于即将到来的父选择器。