Override CSS style of parent element without affecting other elements

问题

I'd like to know how to display an element contained within a parent element that has "display:none" characteristics. But leave the other children under that parent untouched. Here's a simple example:

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

So in this example, I want #item3 to be displayed, but the rest of #parent and its children not to show. I know there are workarounds that involve altering the CSS of every individual item, but I'm working with dozens of items here and was wondering if this is possible, even through JS. Thanks in advance.

回答1:

Why don't you use instead:

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

This way all p children in your parent won't show, but the specific #item3 will.

回答2:

If you hide parent item then child items can not be shown.

Why dont you hide unwanted child items and show just those which to want show.

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

And your CSS will be.

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

来源：https://stackoverflow.com/questions/8002997/override-css-style-of-parent-element-without-affecting-other-elements