：第一个孩子不能按预期工作

96

我正在尝试选择名为的类中的第h1一个。如果它是其中的第一个元素，它将起作用，但如果在此之后出现，它将不起作用。divdetail_containerh1divul

<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>

我的印象是，h1无论它在哪里，我拥有的CSS都会选择第一个div。我该如何运作？

css css-selectors

— 松饼人
source

1

无论CSS不能做什么，JavaScript都可以。

— JCOC611'December

11

这是您可以使用CSS3进行的操作：）

— BoltClock

216

该h1:first-child选择装置

当且仅当它是一个h1元素时，才选择其父项的第一个孩子。

所述:first-child容器的这里是ul，这样不能满足h1:first-child。

:first-of-type您的情况有CSS3 ：

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

但是由于浏览器兼容性问题而已，那么最好还是给第h1一个类一个类，然后再定位该类：

.detail_container h1.first
{
    color: blue;
}

— BoltClock
source

2

我现在明白了，尽管我认为他们在创建标准时应该已经实现了这两个版本。

— 松饼人2010年

在IE9版本中不起作用。它说h1：unknown在开发人员工具中

— Cine11年

11

兼容性列表的:first-of-type选择。

— 杰西·特尔福德

4

较新的兼容性列表中:first-of-type。旧链接不正确。

— BadHorsie 2015年

在我看来，该术语:first-child难以理解，因为您将该项定义为CSS选择器（例如）h1，然后您认为在选定的DOM级别中“采用第一个孩子”。我错误地使用了很多次...我们必须习惯:first-of-type选择器，并想到它的第一个子代。

— Kai Noack

13

:first-childh1 当且仅当它是其父元素的第一个子元素时，才选择第一个。在您的示例中，ul是的第一个孩子div。

伪类的名称有些误导，但它的解释很清楚这里的规范。

jQuery的:first选择器可为您提供所需的内容。你可以这样做：

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

— 罗伯·索伯斯
source

没错，这是令人误解的，我主要是因为以前使用过jQuery感到困惑。

— 松饼人2010年

9

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

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

但是，如果在许多情况下需要相同的选择器，则应该为这些选择器提供一个类，如BoltClock所说。

— 格雷克
source

您应该不会有任何问题。此处的参考文献w3.org/TR/CSS2/selector.html#child-selectors

— Grekz

6

你也可以使用

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

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

— 织物
source

1

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

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

— 鬼吐司
source

0

元素不能直接从<body>tag 继承。您可以尝试将其放在<dir style="padding-left:0px;"></dir>标签中。

— 埃德蒙·周
source