使用现代 CSS 从第一个元素中删除上边距答案

【问题标题】：Removing top margin from first element using modern CSS使用现代 CSS 从第一个元素中删除上边距
【发布时间】：2012-04-16 21:34:49
【问题描述】：

是否可以使用 CSS 和 最新的 Chrome 或 Firefox 自动删除第一个 <h1> 标记的上边距，还是我仍然必须使用 jQuery？

【问题讨论】：

现代，像 CSS3？ h1:first-child { margin:top:0; }?
我一直认为在 HTML 文档中应该只有一个 h1... =/
@DavidThomas 不，你可以有很多 h1 元素，只要它们是页面中同样重要的内容的标题。并且使用 outlining mechanisms of HTML5，您可以只使用 h1 元素，并且仍然具有与 HTML 4.01 等效的结果，您必须使用 h1-h6（尽管目前不建议使用，因为屏幕阅读器不能从浏览器获取确切的标题级别，而不是说仍然存在并且永远不会执行 HTML5 规范所说的旧浏览器）。

【解决方案1】：

你只需要h1:first-child { margin-top: 0px; }DEMO

【讨论】：

一个页面中可以有许多 h1 元素，并且所有元素都可以是它们各自父元素的第一个子元素，而不是页面的第一个子元素。
让我补充一下这个答案：如果你想支持旧的 IE，你可以使用 selectivzr.js 库。 selectivizr.com 但是不要使用 1.0.2 版本，因为它有一些问题。使用来自 GitHub 的 1.0.3b 版本。

【解决方案2】：

没有:first-of-page 选择器所以不，你不能肯定使用CSS。 CSS 中无法从页面中提取所有 h1，无论其父母和前兄弟姐妹如何，只取第一个。
您需要了解更多关于 h1 元素的信息。

例子：

如果第一个 h1 也是 body > header（或 HTML 4.01 中的 #header）的（第一个和或唯一）子级，则您可以选择它
如果所有 h1 都是兄弟，那么h1:first-of-type 肯定是第一个
如果第一个 h1 就在某个部分的主导航之后，那么body > nav + section > h1 会选择它。或者body > header > nav + section > h1:first-of-type

【讨论】：

【解决方案3】：

div#content h1:first-child { margin-top:0; }

AFAIK 这在 IE6 中不起作用，在 IE7 中可能存在错误。

【讨论】：

【解决方案4】：

伪选择器。

h1:first-child {
    margin-top: 0;
}

请注意，Failbrowsers（IE 7 和更早版本）不支持这些功能，因此您可能仍需要 jQuery 备份解决方案。

【讨论】：

【解决方案5】：

给h1标签添加一个类，比如：

<h1 class="first">Your text</h1>

然后在css中：

.first
{
    margin-top: 0;
}

【讨论】：