Блог

Я хотел бы знать, как отобразить элемент, содержащийся в родительском элементе, который имеет характеристики «display: none». Но оставьте другие дочерние элементы под этим родительским элементом нетронутыми. Вот простой пример:

 <div id="parent">
    <p id="item1">Item should show</p>
    <p id="item2">Item should show</p>
    <p id="item3">Item should not show</p>
<div><!--/parent-->

<style>
    #parent {display: none;}
    #item3 {display: block !important;}
</style>
  

Итак, в этом примере я хочу, чтобы отображался #item3, но остальная часть #parent и его дочерние элементы не отображались. Я знаю, что существуют обходные пути, которые включают изменение CSS каждого отдельного элемента, но я работаю здесь с десятками элементов, и мне было интересно, возможно ли это, даже через JS. Заранее спасибо.

Почему бы вам не использовать вместо:

 #parent>p{display:none;}
#item3{display:block;}
  

Таким образом, все дочерние элементы p в вашем родительском элементе не будут отображаться, но будет отображаться конкретный #item3 .

Если вы скроете родительский элемент, дочерние элементы не могут быть показаны.

Почему бы вам не скрыть нежелательные дочерние элементы и не показать только те, которые нужно показать.

 <div id="parent">
<p id="item1" class="hide">Item should show</p>
<p id="item2" class="hide">Item should show</p>
<p id="item3" class="show">Item should not show</p>
  

И ваш CSS будет.

 .hide{display:none;}
.show{display:block; }