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

Posted 2023-03-06

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

【英文标题】：Is there a way to hide all divs inside of a parent div/container by adding an inline style to parent?

【发布时间】：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)。

【参考方案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;