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

【问题标题】：Is there a way to hide all divs inside of a parent div/container by adding an inline style to parent?有没有办法通过向父级添加内联样式来隐藏父级 div/容器内的所有 div？
【发布时间】：2014-01-10 01:04:40
【问题描述】：

我试图弄清楚是否可以通过向父 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>

【问题讨论】：

“似乎都没有隐藏到子 div” - 你的意思是没有隐藏父级？
Wuaow .. 所有答案都获得了投票。凉爽的。圣诞节快到了。
我不明白你的问题，因为将display: none 添加到父母will always hide its child elements （这不是真的，不一定是visibility--it may hide them，除非孩子的@987654332 @ 是set otherwise)。

标签： jquery html css jquery-selectors css-selectors

【解决方案1】：

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

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

或者，如果您使用 jQuery 解决方案，则将 class 添加到父元素，然后使用下面的选择器。

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

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

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

Demo（使用.addClass()）

或者，如果你是inline 风格的粉丝，那就去吧

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

Demo 2

【讨论】：

【解决方案2】：

使用 jquery 吗？

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

它将内联 style="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

【讨论】：

嘿！我可以在第一个冬日回答时得到一顶有趣的帽子吗？
这很糟糕.. * 除非需要，否则永远不要使用它:)
通用选择器可能使用不当，没错，但我不是通用选择器，不是魔鬼本身。此外，在这种情况下，它指的是“所有只有第一级的孩子”，而不是 cssDom 上的所有内容。 ;)

【解决方案3】：

由于您使用的是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
}

【讨论】：

这是最正确的答案，因为它表明原始问题想要可以完成，它说明了为什么该方法不起作用。

【解决方案4】：

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

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

.hero-content > div 将应用于类为hero-content 的元素内的所有div 元素。

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

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

【讨论】：

【解决方案5】：

检查这个 1 :-

http://jsfiddle.net/8DGKB/

.hero-content div  {
    display: none;    
}

【讨论】：

【解决方案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')

【讨论】：

吉特，这些选择器是从哪里来的？（#ParentDivId 和 #ChildDivId）？
请先设置你的父子div id，再设置本语句中的id。

【解决方案7】：

您也可以像这样影响所有子 P 标签

.hero_content {
  display: none;
}

.hero_content P {
  display: none;
}

【讨论】：