【问题标题】：CSS: first-child selector including text nodesCSS：包含文本节点的第一个子选择器
【发布时间】：2019-06-02 09:35:54
【问题描述】：

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

【问题讨论】：

您不能使用 CSS 选择文本节点。您需要更改标记。 stackoverflow.com/a/5688758/1612146
好的，谢谢。标记是由摊牌降价解析器创建的，但我会看一下，谢谢 :-) 我想是否有任何方法可以使用 :before:empty 或类似的东西，但我认为 CSS 无法做到这一点。

标签： html css css-selectors

【解决方案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

【讨论】：

问题在于，实际上，我想要示例第一个标题的边距，因为它之前有一个文本节点。
@BlackWolf 我已经更新了答案，现在它删除了除第一个标题之外的边距
感谢您的努力......这是一个很好的技巧，不幸的是仍然不是我需要的，因为如果它出现在任何文本之前，我需要从第一个孩子中删除边距。所以在this fiddle 中，第一个标题的边距应该是 0。我认为 oGeez 说 CSS 不能做到这一点是对的，但无论如何谢谢。
@BlackWolf 乐于助人:)

【解决方案2】：

在 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 或px。

（这在我的情况下没有帮助 - 如果在包含 <p> [在 WordPress 生成的内容中] 之前有一些文本，我想为 floated img 添加上边距。但float-ed 元素的边距不会随其容器折叠，问题的一般答案是“不，没有这样的选择器。”）

【讨论】：