如果标题存在，第一个子选择器不起作用答案

【问题标题】：First child selector doesn't work if header is present如果标题存在，第一个子选择器不起作用
【发布时间】：2014-03-11 12:19:27
【问题描述】：

我有一个带有标题和一些部分的简单 HTML。

<header>Header</header>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>

我想为第一部分设置样式

section:first-child {
    background-color:green;    
}

当存在header (jsfiddle) 时，:first:child 选择器似乎不起作用。当我删除 header 时，一切都恢复正常了！为什么？

【问题讨论】：

【解决方案1】：

这是因为<section> 不是其父级的第一个子级。

element:first-child 表示其父元素的第一个子元素，与元素匹配。在您的情况下，父元素的第一个元素是 <header> 元素。

您可以改用:first-of-type 伪类。

section:first-of-type {
    background-color:green;    
}

来自MDN：

:first-of-type CSS 伪类表示第一个同级它在其父元素的子元素列表中的类型。

【讨论】：

【解决方案2】：

您应该申请first-of-type。

section:first-of-type {
    background-color:green;    
}

【讨论】：

【解决方案3】：

应该试试:first-of-type伪类

section:first-of-type {
    background-color:green;    
}

【讨论】：