如何覆盖display：none属性应用于特定子元素中的父元素

Ash 发表于 Dev

灰

我已经在这上面摸了一段时间，无法弄清楚为什么它不起作用。我基本上是试图仅使用CSS隐藏页面上的某些特定内容-为此，我将无法访问页面HTML，但可以随意注入CSS。

好的，我已经有了一个基本的HTML结构，如下所示：

<div id="content-body">
<p> want this to stay </p>    
<h2>want this to stay</h2>
<p> want this to stay </p>
<p> want this to stay </p>
<p> want this removed </p>    
<h2>want this removed</h2>
<p> want this removed </p>
<p> want this removed </p>
</div>

香港专业教育学院将以下CSS放在一起，以删除整个“ content-body”元素，然后在特定子元素上覆盖此元素，但是它似乎不起作用。

#content-body {display:none}

p:nth-child(1) {display:block !important}
h2:nth-child(2) {display:block}
p:nth-child(3) {display:block}
p:nth-child(4) {display:block}

重要标签似乎没有任何区别。关于我如何格式化此格式，有什么不正确的地方吗？（实际页面中的HTML比示例更多，因此通过CSS删除所有内容比单独选择元素要容易得多，尽管我可能需要这样做）

jmore009

您可以通过调用以下方式隐藏父元素：

#content-body {display:none}

因此，无论您如何定位他们，所有孩子都将被隐藏。相反，您需要做的是将p和h2元素隐藏在其中#content-body，然后使用nth-of-type代替nth-child（因为您要定位第1个h2和第3个p，等等）来覆盖要显示的元素，如下所示：

#content-body p, #content-body h2 {
    display: none;
}    

#content-body p:nth-of-type(1),
#content-body p:nth-of-type(2),
#content-body p:nth-of-type(3),
#content-body h2:nth-of-type(1) {
    display: block;
}

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。