我已经为这个问题绞尽脑汁了一段时间,想不通为什么它不起作用。我主要是尝试仅使用 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 删除所有内容比单独选择元素要容易得多,尽管我可能需要这样做)
最佳答案
您通过调用隐藏父元素:
#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;
}
关于html - 如何覆盖显示 :none property applied to parent element in specific child elements,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27823405/