：第一个孩子未按预期工作

我试图选择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。我怎样才能使它工作？

来源

2010-12-22 The Muffin Man

无论CSS不能做什么，JavaScript都可以。 – JCOC611 2010-12-22 02:39:45

这是你可以用CSS3做的东西:) – BoltClock 2010-12-22 02:43:14

152

的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; 
}

来源

2010-12-22 02:37:10 BoltClock

:first-child选择第一个h1当且仅当它是其父元素的第一个孩子。在你的例子中，ul是div的第一个孩子。

伪类的名称有点令人误解，但它在规范中很清楚地解释了here。

jQuery的:first选择器给你你要找的。你可以这样做：

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

来源

2010-12-22 02:35:23

那么，我该如何做到这一点？ – 2010-12-22 02:36:57

您的权利是误导性的，我主要感到困惑，因为我以前使用过jQuery来做这件事。 – 2010-12-22 02:47:31

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

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

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

来源

2010-12-22 23:19:23 Grekz

您可以将h1标签包装在另一个div中，然后第一个标签将是first-child。 div甚至不需要样式。这只是一种隔离这些孩子的方式。

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

来源

2012-05-09 16:47:41 GhostToast

你也可以使用

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

通过由您可以选择任何其他H1项目的任何其他改号1号。

来源

2014-03-14 08:37:05 user3419033

：第一个孩子未按预期工作

回答

相关问题