html - 如何覆盖显示 :none property applied to parent element in specific child elements

Question

我已经为这个问题绞尽脑汁了一段时间，想不通为什么它不起作用。我主要是尝试仅使用 CSS 隐藏页面上的某些特定内容 - 对于这项工作，我无法访问页面上的 HTML，但可以随意注入(inject) 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}

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

Answer 1

您通过调用隐藏父元素:

#content-body {display:none}

因此，无论您如何定位，所有子项都将被隐藏。您需要做的是隐藏 #content-body 中的 p 和 h2 元素，然后使用nth-of-type 而不是 nth-child(因为你想定位第一个 h2 和第三个 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;
}

FIDDLE