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

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-typeCSS伪类表示它的类型在其父元素的子列表中的第一个兄弟.