CSS中“:nth-child”、“:first-child”與“:first-of-type”這三者的區別

參考資料

詳細講解

首先我們先看下面這段HTML的示例代碼，通過這段代碼我們來逐個理解三個選擇器的用法。

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

“:nth-child”詳細講解

以上代碼中css1的含義是第二個子元素並且類型是“div”，所以選中的只有div1。 div1在父容器中是第二個子元素且類型是“div”。 p3是父容器的第二個子元素，但是它並不是“div”類型所以不被選擇。如果我們修改樣式把選擇器前面的div去掉，那麼p3也會被選中。

“:first-child”詳細講解

以上代碼中css2的含義是第一個子元素並且類型是p，所以選中的只有p1。 p1在父容器中是第一個子元素且類型是“p”。它跟上面的“:nth-child”是類似的含義，如果使用“:nth-child”將參數傳入1，則效果完全一致。

“:first-of-type”詳細講解

以上代碼中css3的含義是第一個類型是“p”的子元素，這裡跟上面兩個選擇器不同的地方在於先找到對應的類型，然後再獲取第一個符合類型的元素。所以選中的有p1和p3。 p1和p3都是父容器中的第一個“p”元素。