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

我正试图用一个名为

detail\u container

的类在

div

中选择第一个

h1

。如果

h1

是此

div

中的第一个元素，则它可以工作，但如果它位于此

ul

之后，则它将不工作

.detail_容器h1：第一个孩子
{
颜色：蓝色；
} 




第一个H1
第二个H1

---

我的印象是，我的CSS将选择第一个

h1

，无论它在这个

div

中的什么位置。如何使其工作？

：第一个子元素

选择第一个

h1

当且仅当它是其父元素的第一个子元素时。在您的示例中，

ul

是

div

的第一个子项

伪类的名称有点误导，但在规范中解释得相当清楚

jQuery的

：首先

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

---

$（'.detail_容器h1:first'）.css（“颜色”、“蓝色”）
该
h1：第一个孩子
选择器意味着

选择其父级的第一个子级

当且仅当它是
h1
元素时

此处容器的
：第一个子
是
ul
，因此不能满足
h1:first child

有CSS3的
：第一种类型的
，适用于您的案例：

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

但是由于浏览器兼容性问题等等，您最好先给
h1
一个类，然后针对该类：

.detail_container h1.first
{
    color: blue;
}

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

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

但是，如果您在许多情况下需要相同的选择器，您应该为这些设置一个类，如BoltClock所说。
您可以将
h1
标记包装在另一个
div
中，然后第一个将是
第一个子项。那
div
甚至不需要样式。这只是隔离那些孩子的一种方式

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


标题1
标题2
您也可以使用

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

通过将数字1更改为任何其他数字，您可以选择任何其他h1项。
元素不能直接从
标记继承。
你可以试着把它放在一个
标签中。
不管CSS做不了什么，JavaScript都可以。这是你可以用CSS3做的：）我现在明白了，尽管我认为他们在创建标准时应该实现这两个版本。在IE9版本中不起作用。它在
：类型
选择器的第一个的开发者工具中显示h1:unknown。of
：类型的第一个
。旧链接不正确。在我看来，术语
：first child
不清楚，因为您将该项定义为CSS选择器，比如说
h1
，然后您认为在所选DOM级别中“获取第一个子项”。我用错了很多次。。。我们必须习惯于
：类型的第一个
选择器，并考虑其类型的第一个子项。您的权利这是误导性的，我主要感到困惑，因为我以前使用jQuery来做这件事。您不应该有任何问题。这是裁判