匹配整个文档中的第一个元素？ [复制]答案

【问题标题】：Matching first element in whole document? [duplicate]匹配整个文档中的第一个元素？ [复制]
【发布时间】：2014-12-17 19:59:19
【问题描述】：

我想匹配整个文档中的第一个 H1 元素。但是，现在我面临一个问题。

我正在使用以下 CSS 选择器：

h1:first-child {
...
}

但是，它匹配页面上的多个 H1 标签。我怎样才能让它只匹配第一个？

【问题讨论】：

你能展示你的 HTML 吗？ jsfiddle.net 演示也会有所帮助。最有可能的答案是#containingElement > h1:first-child。
在 Chrome jsfiddle.net/C2r2R 中工作正常。如果您没有父 div，请尝试 body > h1:first-child {}。
@ngen 但如果您将h1 嵌套在其他div 中，它们也将被视为此类divs 中的first-child，并且css 规则将应用于它们

【解决方案1】：

没有这样的选择器； all available selectors 只能匹配兄弟姐妹，不能匹配多个父节点的同名元素的顺序。反正你的选择器会很脆弱。

相反，只需用适当的类标记第一个 h1，或匹配其结构。例如，您可能想要匹配

body>header:first-child>h1

改为。

【讨论】：

【解决方案2】：

这是因为选择器现在查看的是整个文档，它查看的是父文档。任何时候 <h1> 是 any 元素的第一个子元素，它都会匹配该选择器。如果您只希望它应用于文档中的一个 <h1>，请考虑为其提供单独的类或 ID，或者根据您希望它出现的位置更具体地选择它。

例如，在我的网站上，我将每个文本块分成一个<div class="box">，它们都存在于文档的<body> 中。因此，如果我只想匹配 document 中的第一个 <h1>，我可以这样做：

body > .box:first-child > h1:first-of-type { }

这将只选择第一个框，然后匹配该框中的第一个<h1>，模拟“文档中的第一个<h1>”效果（假设第一个框有一个<h1>，在我的网站上如果存在，则始终为真）。我假设您想在这里使用 :first-of-type 选择器，因为文档中的第一个 <h1> 不一定必须是父级的第一个子级。

【讨论】：

【解决方案3】：

你可以用 jQuery 作弊吗？有时 jQuery (javascript) 提供了超越 html 和 css 限制的优雅替代方案

$(document).ready(function() {
 $('body').find('h1:first').css('color','#0000ff');
}); //  ready

【讨论】：

我不明白为什么这一次被否决。它最终成为我的解决方案。非常感谢。
@Mathias：可能是因为问题没有要求 jQuery 解决方案，即使该解决方案完全有效。
我提供了这个作为替代解决方案，因为它似乎不存在“仅 css”可能的解决方案（除非有人证明我错了）。最后，无论赞成票还是反对票，这里重要的是提供帮助。我很高兴它对你有用。谢谢。
可能有 CSS 解决方案，但不看 HTML 就不可能知道。

【解决方案4】：

这将匹配作为其直接父级的第一个子级的每个 h1。所以如果你喜欢

<div>
  <h1></h1>
</div>
<div>
  <h1></h1>
</div>

这两个 h1 标签都是第一个孩子。

尝试 h1:first

【讨论】：