Question

我试图通过向父div添加内联样式来确定是否可以隐藏父容器中的所有子div。我尝试了visibility: hidden;和display: none;两者似乎都没有隐藏孩子的div。我以为我可以使用一些jquery循环遍历所有子div并为每个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

使用jquery？

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

它会将内联样式=“display：none”添加到.hero-content的第一级子元素中。

这意味着：

<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}

jsFiddled here

precisions about not in an element jsFiddled here

Answer 2

由于您使用的是z-index，display:none失败了....请参阅此demo并移除z-index，这样可以使用!!

<强> CSS

.hero-content {
    text-align: center;
    height: 650px;
    padding: 80px 0 0 0;
}
.title, .description {
    position: relative;
    display:none
}

Answer 3

您无法使用父元素上的内联样式隐藏子元素，因此请使用{{1}对于您的子元素，您不需要内联样式来执行此操作

display: none;

或者如果你要使用jQuery解决方案，而不是将.hero-content > div.title, .hero-content > div.description { display: none; }添加到父元素，而不是使用下面的选择器。

class

现在使用jQuery在父元素上添加.hide_this > div.title, .hide_this > div.description { display: none; } .hide_this。

class

Demo（使用.addClass()）

或者如果你是$(".hero-content").addClass("hide_this");风格的粉丝而不是这里的

inline

Demo 2

Answer 4

您可以简单地使用CSS选择器。

.hero-content div将适用于具有类div的元素内的所有hero-content元素。

.hero-content > div将立即应用于具有类div的元素内的所有hero-content个元素。

所以，你的第二个CSS选择器应该是：

.hero-content div  {
  position: relative;
  z-index: 2
  display: none;
}

Answer 5

查看这个1： -

http://jsfiddle.net/8DGKB/

.hero-content div  {
    display: none;    
}

Answer 6

试试这个，

通过jQuery，您必须在加载页面时使用下面的代码。

<div Id="ParentDivId" class="hero-content">
   <div Id="ChildDivIdFirst" class="title"> This is a title </div>  
   <div Id="ChildDivIdSecond" class="description"> This is a description</div>  
</div>

  $("#ParentDivId").find('#ChildDivIdFirst').css('display','none')
  $("#ParentDivId").find('#ChildDivIdSecond').css('display','none')

Answer 7

您可以像这样影响所有儿童P标签

＆＃13;

.hero_content {
  display: none;
}

.hero_content P {
  display: none;
}

＆＃13;

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

7 个答案: