nth-of-type和nth-child的區別-html教學-PHP中文網

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

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

看起來跟nth-child很像

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

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

HTML：

        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            box：       </span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>  
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pox"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            pox：        </span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>        
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

CSS：

<span style="color: #800000;">        <style>
            .box</span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
            .pox</span>{<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 100px 0 0 60px</span>;<span style="color: #ff0000;">
                float</span>:<span style="color: #0000ff;"> left</span>;
            }<span style="color: #800000;">
         .pox p:nth-child(1)</span>{<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> red</span>;
            }<span style="color: #800000;">
         .box p:nth-of-type(1)</span>{<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> red</span>;
            }<span style="color: #800000;">
        </style></span>

登入後複製

結果貌似相同：

這裡稍微做一下改變HTML：

         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            box：
            </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div1<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pox"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
            pox：
            </span><span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>我是div2<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我是p2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

結果：

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

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

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

<span style="color: #800000;">.pox p:nth-child(2)</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> red</span>; }

登入後複製

結果：