CSS:包含文本节点的第一个子选择器

时间:2014-03-04 18:08:42

标签: html css css-selectors

有没有办法选择一个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中有什么方法可以防止这种情况吗?

2 个答案:

答案 0 :(得分:1)

删除margin,而不仅仅是margin-top,h1元素正在推送下一个元素

#content h1 {
    margin-top: 1em;
}
#content h1:first-child {
    margin: 0px;
}

Demo Fiddle

如果您要删除除第一个以外的所有内容

#content h1:not(:first-child) {
    margin: 0px;
}

Updated Fiddle

答案 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元素的边距不会随容器一起折叠,对该问题的一般回答是“不,没有这样的选择器。”