nth-of-type與nth-child的區別

nth-of-type：

　　 簡單來說nth-of-type會忽略其它標簽的順序而按照標簽自身種類的順序進行篩選，也就是選擇的參照點並不是DOM數，而是自身。下面我們結合具體的例子來了解下。

    <style>
        p:nth-of-type(3){
            background: red;
        }
    </style>
    <h1>這是一個段落</h1>
    <p>這是一個段落</p>
    <h1>這是一個段落</h1>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <h1>這是一個段落</h1>

代碼效果如下圖所示，文本中的第3個p標簽背景顏色發生改變。

nth-child：

　　它的屬性就是按照所有類型標簽的所謂整體隊列進行排序篩選，也就是說不論你是h1還是p標簽，使用這個屬性你要遵循在DOM樹中的順序來進行操作。

    

    <style>
        p:nth-child(6){
            background: red;
        }
    </style>
    <h1>這是一個段落</h1>
    <p>這是一個段落</p>
    <h1>這是一個段落</h1>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <p>這是一個段落</p>
    <h1>這是一個段落</h1>

如圖，第6個標簽的顏色發生改變