有没有办法通过向父级添加内联样式来隐藏父div /容器内的所有div？

Question

我试图通过向父div添加内联样式来确定是否可以隐藏父容器内的所有子div.我试过了两个visibility: hidden;,display: none;似乎都没有隐藏孩子的div.我以为我可以使用一些jquery循环遍历所有子div并为每一个添加内联样式,尽管我认为必须有一种方法可行.

这是一个例子:

CSS

  .hero-content {
      text-align: center;
      height: 650px;
      padding: 80px 0 0 0;
    }

    .title, .description {
      position: relative;
      z-index: 2
    }

HTML

<div class="hero-content">
   <div class="title"> This is a title </div>  
   <div class="description"> This is a description</div>  
</div>

Answer 1

您不能在父元素上使用内联样式隐藏子元素，因此对于您的子元素，您不需要内联样式来执行此操作display: none;

.hero-content > div.title,
.hero-content > div.description {
   display: none;
}

或者，如果您要使用 jQuery 解决方案，那么class在父元素中添加 a并使用下面的选择器。

.hide_this > div.title,
.hide_this > div.description {
   display: none;
}

现在.hide_this class使用 jQuery添加父元素。

$(".hero-content").addClass("hide_this");

演示（使用.addClass()）

或者，如果您是inline时尚的粉丝，那么您就去吧

$(".hero-content .title, .hero-content .description").css({"display":"none"});

演示 2

Answer 2

使用 jquery 吗？

$(".hero-content > *").css('display','none');

它将向 .hero-content 的第一级子元素添加内联 style="display:none"。

这意味着 ：

<div class="hero-content">
   <div class="title"> This is a title </div>
   <div class="description"> This is a description</div>
    This text in NOT in an element so will remain visible.
</div>

使用 css ：

.hero-content > * {display:none}

js在这里摆弄

关于不在元素中的精度 jsFiddled here