CSS結構偽類E:first-child/last-child/only-child/empty

E:first-child解釋：E的父元素的第一個子元素正好是E，給這個E定義樣式

E:last-child解釋：E的父元素的最後一個子元素正好是E，給這個E定義樣式

E:only-child解釋：E的父元素只有一個子元素，這個正好是E，給這個E定義樣式

E:empty解釋：E元素沒有子元素和文本內容，給這個E定義樣式

例子：只要E元素是它的父級的第一個子元素，就選中。它需要同時滿足兩個條件，一個是“第一個子元素”，另一個是“這個子元素剛好是E”。

<style>
span:first-child{color: red;}
p:first-child{color: blue;} /*p元素的父元素的第一個子元素是div而不是p元素，因此該樣式不起作用*/
i:first-child{color: orange;}
</style>

<div class="demo">
<div>.demo的第一個子元素是div</div>
<!--第一個span元素是它的父級P元素的第一個span，顏色變紅色-->
<p><span>第一個span</span>第一個段落P<span>第二個span</span></p>
<!--第一個i元素是它的父級a元素的第一個i，顏色變橙色-->
<p>一個鏈接<i>第一個i元素</i></p>
<!--第二個i元素是它的父級a元素的第一個i，顏色變橙色-->
<p>一個鏈接<i>第二個i元素</i></p>
<p>一個鏈接</p>
</div>