CSS :first-child 没有按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4505686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:first-child not working as expected
提问by The Muffin Man
I'm trying to select the first h1inside a divwith a class called detail_container. It works if h1is the first element within this div, but if it comes after this ulit won't work.
我想选择第一个h1内div有一个叫做类detail_container。如果h1是 this 中的第一个元素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>
I was under the impression that the CSS I have will select the first h1no matter where it is in this div. How can I make it work?
我的印象是，我拥有的 CSS 将选择第一个，h1无论它在哪里div。我怎样才能让它工作？
回答by BoltClock
The h1:first-childselector means
该h1:first-child选择装置
Select the first child of its parent
if and only if it's anh1element.
当且仅当它是一个h1元素时，才选择其父项的第一个子项。
The :first-childof the container here is the ul, and as such cannot satisfy h1:first-child.
所述:first-child容器的这里是ul，这样不能满足h1:first-child。
There is CSS3's :first-of-typefor your case:
:first-of-type您的情况有 CSS3 ：
.detail_container h1:first-of-type
{
color: blue;
}
But with browser compatibility woes and whatnot, you're better off giving the first h1a class, then targeting that class:
但是由于浏览器兼容性问题等等，你最好给第h1一个类，然后针对该类：
.detail_container h1.first
{
color: blue;
}
回答by Rob Sobers
:first-childselects the first h1if and only ifit is the first child of its parent element. In your example, the ulis the first child of the div.
:first-child选择第一个h1当且仅当它是其父元素的第一个子元素。在您的示例中，ul是 的第一个孩子div。
The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly herein the spec.
伪类的名称有些误导，但它的解释很清楚这里的规范。
jQuery's :firstselector gives you what you're looking for. You can do this:
jQuery 的:first选择器为您提供了您正在寻找的东西。你可以这样做：
$('.detail_container h1:first').css("color", "blue");
$('.detail_container h1:first').css("color", "blue");
回答by Grekz
For that particular case you can use:
对于这种特殊情况，您可以使用：
.detail_container > ul + h1{
color: blue;
}
But if you need that same selector on many cases, you should have a class for those, like BoltClock said.
但是，如果您在许多情况下都需要相同的选择器，那么您应该为这些选择器创建一个类，就像 BoltClock 所说的那样。
回答by Fabrice
you can also use
你也可以使用
.detail_container h1:nth-of-type(1)
By changing the number 1 by any other number you can select any other h1 item.
通过将数字 1 更改为任何其他数字，您可以选择任何其他 h1 项目。
回答by GhostToast
You could wrap your h1tags in another divand then the first one would be the first-child. That divdoesn't even need styles. It's just a way to segregate those children.
您可以将您的h1标签包装在另一个中div，然后第一个将是first-child. 那div甚至不需要样式。这只是隔离那些孩子的一种方式。
<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>
回答by Edmond Chow
The element cannot directly inherit from <body>tag.
You can try to put it in a <dir style="padding-left:0px;"></dir>tag.
元素不能直接从<body>标签继承。您可以尝试将其放入<dir style="padding-left:0px;"></dir>标签中。
