第一胎不按预期工作

我正在尝试选择 div中的第一个 h1，它的类名为 detail_container。如果 h1是这个 div中的第一个元素，那么它会工作，但是如果它在这个 ul之后，那么它就不会工作。

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>

我的印象是，我的 CSS 将选择第一个 h1无论它是在这个 div的地方。我该怎么做？

166484 次浏览

小开

:first-child选择第一个 h1 如果，也只有如果，它是其父元素的第一个子元素。在您的示例中，ul是 div的第一个子级。

伪类的名称有些令人误解，但是在规范中已经非常清楚地解释了给你。

JQuery 的 :first选择器提供了所需的内容:

$('.detail_container h1:first').css("color", "blue");

小开

最佳答案

h1:first-child选择器表示

选择其父级的第一个子级
当且仅当它是 h1元素。

这里容器的 :first-child是 ul，因此不能满足 h1:first-child。

这是 CSS3的 :first-of-type:

.detail_container h1:first-of-type
{
color: blue;
}

但是由于浏览器兼容性的问题和诸如此类的问题，你最好给第一个 h1一个类，然后瞄准那个类:

.detail_container h1.first
{
color: blue;
}

小开

对于这种特殊情况，您可以使用:

.detail_container > ul + h1{
color: blue;
}

但是如果您在许多情况下需要相同的选择器，那么您应该为这些选择器创建一个类，就像 BoltClock 所说的那样。

小开

你可以用另一个 div来包装你的 h1标签，然后第一个就是 first-child。div甚至不需要样式。只是为了隔离那些孩子。

<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>

小开

你也可以使用

.detail_container h1:nth-of-type(1)

通过将数字1改为任何其他数字，您可以选择任何其他 h1项目。