<div>
<h1>我是標題1</h1>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<h1>我是標題1</h1>
</div>
div span {
background: lightgreen;
}
div span:first-child {
background: red;
}
div span:last-child {
background: orange;
}
image
使用以上代碼娇哆，希望對div下的第一個span和最后一個span進行更改背景色，發(fā)現(xiàn)無效果钧椰，
將前后的<h1>我是標題1</h1>去掉后才正常顯示
image-20200214160258444
在W3school上的描述是
image
重點是和父元素有關(guān)系，即元素是對應的選擇器且為父元素的第一個子元素，才會應用選擇器對應的樣式馁筐。
為了提高代碼的可讀性，減少偽類表意和真實作用的混淆坠非，first-child這類偽類選擇器建議只在同一特征的元素上使用敏沉。
