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

看CSS3時發現了一個nth-of-type選擇器，發現平時基本沒見過用，就研究了一下，w3c是這樣說明的：

:nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素.

看起來和nth-child很像

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。

那麼兩者區別到底是什麼？試驗一下吧。

HTML：

        <div class="box">
            box：       
            <p>我是p1</p>  
            <p>我是p2</p>
        </div>
        <div class="pox">
            pox：        
            <p>我是p1</p>        
            <p>我是p2</p>
        </div>        

CSS：

        <style>
            .box{
                margin: 100px;
                float: left;
            }
            .pox{
                margin: 100px 0 0 60px;
                float: left;
            }
         .pox p:nth-child(1){
                color: red;
            }
         .box p:nth-of-type(1){
                color: red;
            }
        </style>

結果貌似相同：

這裡稍微做一下改變HTML：

         <div class="box">
            box：
            <div>我是div1</div>
            <p>我是p1</p>
            <div>我是div2</div>
            <p>我是p2</p>
        </div>
        <div class="pox">
            pox：
            <div>我是div</div>
            <p>我是p1</p>
            <div>我是div2</div>
            <p>我是p2</p>
        </div>        

結果：

這裡發現nth-child沒有起作用，這是為什麼呢？

其實p:nth-of-type(n)是指父元素下第n個p元素， 而p:nth-child(n)是指父元素下第n個元素且這個元素為p，若不是，則選擇失敗。

這裡的pox下的第一個子元素是div而不是p，所以選擇失敗。若想p1變紅，p1是pox下的第二個子元素應該選擇nth-child(2)，應該改為：

.pox p:nth-child(2){ color: red; }

結果：