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

覆盖父元素的CSS样式而不影响其他元素

2 个答案: