Есть ли способ скрыть все div внутри родительского div/container, добавив встроенный стиль родительскому?

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 в родительский элемент, а затем использовать селектор ниже.

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

Теперь добавьте .hide_thisclass на родительский элемент с помощью JQuery.

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

Demo (Использование .addClass())

---

Или, если вы являетесь поклонником inline стиля, чем здесь вы идете

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

Demo 2

Answer 2

Вы можете просто использовать 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 3

Поскольку вы используете z-index, display:none не работает .... смотрите demoz-index удален и все работает !!

CSS

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

Answer 4

CHECK THIS 1: -

http://jsfiddle.net/8DGKB/

.hero-content div { 
    display: none;  
} 

Answer 5

Попробуйте это,

Через 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 6

Использование jquery?

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

Это не добавит встраиваемый стиль = «дисплей: нет» на то, что когда-нибудь это первый уровень дочернего элемент .hero-контент.

Это означает:

<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