：第一个孩子没有按预期工作
我试图select一个名为detail_container类的div内的第一个h1 。 如果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将会select第一个h1而不pipe这个div在哪里。 我怎样才能使它工作？
h1:first-childselect器意味着
select其父项的第一个子项
当且仅当它是一个h1元素。
这里的容器的:first-child是ul ，因此不能满足h1:first-child 。
有CSS3的:first-of-type你的情况的:first-of-type ：
.detail_container h1:first-of-type { color: blue; }
但是对于浏览器兼容性的问题，你最好给第一个h1一个类，然后针对这个类：
.detail_container h1.first { color: blue; }
:first-child 当且仅当它是其父元素的第一个子元素时，第一个子元素select第一个元素h1 。 在你的例子中， ul是div的第一个孩子。
伪类的名字有些误导，但是在这个规范中，这个解释很清楚。
jQuery的:firstselect器给你你在找什么。 你可以这样做：
$('.detail_container h1:first').css("color", "blue");
对于这种特殊情况，您可以使用：
.detail_container > ul + h1{ color: blue; }
但是如果你在很多情况下需要同一个select器，那么你应该有一个类，就像BoltClock所说的那样。
你也可以使用
.detail_container h1:nth-of-type(1)
通过任何其他号码更改数字1，您可以select任何其他H1项目。
你可以把你的h1标签h1另一个div ，然后第一个就是第一个first-child 。 该div甚至不需要样式。 这只是隔离这些孩子的一种方式。
<div class="h1-holder"> <h1>Title 1</h1> <h1>Title 2</h1> </div>
