Переопределить стиль CSS родительского элемента, не затрагивая другие элементы

Question

Я хотел бы знать, как отобразить элемент, содержащийся в родительском элементе, который имеет характеристики «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. Заранее спасибо.

Answer 1

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

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

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

Answer 2

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

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

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