Question

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

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

h1:first-child {
...
}

但是，它匹配页面上的几个H1标签。我怎样才能使它与第一个匹配？

Answer 1

没有这样的选择器; all available selectors只能匹配兄弟姐妹，而不能匹配多个父母的同名元素的顺序。无论如何，你的选择器会非常脆弱。

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

body>header:first-child>h1

代替。

Answer 2

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

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

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

这将仅选择第一个框，然后匹配该框中的第一个<h1>，模拟“文档中的第一个<h1>”效果（假设第一个框具有{{1} }，如果存在，我的网站上总是如此）。我假设你想在这里使用<h1>选择器，因为文档中的第一个:first-of-type不一定是父母的第一个孩子。

Answer 3

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

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

Answer 4

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

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

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

尝试h1：首先