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

Question

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

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

我想设计第一部分的样式

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

当:first:child存在时，header选择器似乎无效（jsfiddle）。当我删除header时，一切都有效！为什么呢？

Answer 1

那是因为<section>不是其父母的第一个孩子。

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

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

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

来自MDN：

  

:first-of-type CSS伪类代表了第一个兄弟   它在父元素子元素列表中的类型。

Answer 2

你应该申请first-of-type。

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

Answer 3

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

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