有没有办法选择一个CSS元素,它是其父元素的第一个子元素,计算文本节点?如果标题位于其父级的顶部,我想删除标题的上边距,但如果我使用:
#content h1 {
margin-top: 1em;
}
#content h1:first-child {
margin-top: 0;
}
并有一些类似
的HTML<div id="content">
This is some text.
<h1>A heading</h1>
Some more text.
</div>
保证金仍然被删除。 CSS中有什么方法可以防止这种情况吗?
答案 0 :(得分:1)
删除margin
,而不仅仅是margin-top
,h1元素正在推送下一个元素
#content h1 {
margin-top: 1em;
}
#content h1:first-child {
margin: 0px;
}
如果您要删除除第一个以外的所有内容
#content h1:not(:first-child) {
margin: 0px;
}
答案 1 :(得分:0)
在OP中给出的示例中,您可以(删除:first-child
规则,然后添加)
#content {
margin-top: 1em;
}
如果标题前没有文本,则collapse(结合并重叠)与h1
的页边距,但是如果有h1
,将有一个单独的顶部页边距。然后,您只需要调整前面的内容的底部填充/边距即可使#content
处于理想的位置,或者也可以添加带有负边距的::before
伪元素(这将折叠并取消容器的边距)以完成操作:
#content:before {
display: block;
margin-top: -1rem;
content: ' ';
}
请注意,如果h1
具有不同的font-size
,则1em
将会有所不同,因此您必须对此加以考虑或使用诸如rem
或{{ 1}}。
(这对我而言无济于事–如果包含px
的{{1}}版{{1}由WordPress生成的内容]。但是float
-ed元素的边距不会随容器一起折叠,对该问题的一般回答是“不,没有这样的选择器。”