nth-child & nth-of-type講解

時間 2019-11-09

標籤 nth child type 講解简体版

原文原文鏈接

關於nth-child && nth-of-type的區別，網上不少人的解釋是存在誤區，解釋是不夠清楚的，今天在這裏把我的測試過的分享給你們css

按標籤進行選擇

寫法一：html

<body>
    <div class="aaa">
        <p>111</p>
        <p>222</p>
        <p>333</p>
        <p>444</p>
        <p>555</p>
        <p>666</p>
        <p>777</p>
    </div>
</body>

使用p:nth-child(n+2){color:red;}得出的效果如圖：
測試

使用p:nth-of-type(n+2){color:green;}得出的效果如圖：
spa

由以上兩個效果圖可知，在父級元素（div.class=aaa）下只有p標籤的時候，二者沒什麼區別。code

寫法二：htm

<body>
    <div class="aaa">
        <span>哈哈</span>
        <p>111</p>
        <p>222</p>
        <p>333</p>
        <p>444</p>
        </div>
</body>

css中使用p:nth-child(n+2)的時候，效果以下：
blog

css中使用p:nth-of-type(n+2)的時候，效果以下：
圖片

由此可知，nth-child和nth-of-type的區別就是nth-child只選擇父級元素下的第幾個子元素，不會對子元素的標籤進行區分，如選擇的條件是n+2,從父級元素第二個子元素開始選擇，當第二個元素是p標籤則進行選擇，若是不是則跳過，如：
it

而nth-of-type會選擇標籤的第幾個元素，如，p:nth-of-type(n+2)，就是讀取父級元素下p標籤的第幾個元素。當你在p標籤之中插入其餘標籤的時候，也是讀取p標籤的第幾個元素。如：
class

以上講解的是nth-child 和 nth-of-type都是用標籤進行選擇，下面講講它們用class類名進行選擇的區別

按class類名進行選擇

寫法一：

<body>
    <div>
        <p class="bbb">111</p>
        <p class="bbb">222</p>
        <p class="bbb">333</p>
        <p class="bbb">444</p>
        <p class="bbb">555</p>
        <p class="bbb">666</p>
        <p class="bbb">777</p>
    </div>
</body>

這種寫法使用nth-child和nth-of-type的效果同樣，和標籤選擇的效果也同樣，因此再也不詳細說明。

寫法二：

<body>
    <div class="aaa">
        <span>哈哈</span>
        <p class="bbb">111</p>
        <p class="bbb">222</p>
        <span>我是span標籤</span>
        <p class="bbb">333</p>
        <span>我是span標籤2</span>
        <p class="bbb">444</p>
    </div>
</body>

使用.bbb:nth-child(n+2){color:red;}使用的效果如圖：

而使用.bbb:nth-of-type(n+2){color:green;}的效果如圖：

這就有個問題，nth-child和nth-of-type是不是根據class類名進行選擇，仍是根據標籤選擇。爲了測試，我將html改成：

<body>
    <div class="aaa">
        <span>哈哈</span>
        <p>111</p>
        <p>222</p>
        <span>我是span標籤</span>
        <p class="bbb">333</p>
        <span>我是span標籤2</span>
        <p class="bbb">444</p>
        <p class="bbb">555</p>
        <p class="bbb">666</p>
    </div>
</body>

使用.bbb:nth-child(n+2){color:red;}使用的效果如圖：

而使用.bbb:nth-of-type(n+2){color:green;}的效果如圖：

而當給「222」和「333」之間的span標籤加上一個class=「bbb」的類名的時候，出現的效果如圖：

html代碼：

<body>
    <div class="bbb">
        <span>哈哈</span>
        <p>111</p>
        <p>222</p>
        <span class="bbb">我是span標籤</span>
        <p class="bbb">333</p>
        <span>我是span標籤2</span>
        <p class="bbb">444</p>
        <p class="bbb">555</p>
        <p class="bbb">666</p>
        <div class="bbb">
            我是div.class=bbb
            <a class="bbb">我是a標籤第一個</a>
            <a class="bbb">我是a標籤第二個</a>
        </div>
    </div>
</body>

使用p:nth-child(n+2){color:red;}效果如圖：

使用p:nth-of-type(n+2){color:green;}效果如圖：

由以上兩個效果圖可知，nth-child和nth-of-type能夠經過class類名進行選擇，nth-child是從父元素div下的第二個子元素進行判斷，若是擁有該class類名，則進行選中；可是 nth-of-type是首先判斷class名的標籤的類型，再分別對不一樣的標籤從對應的位置開始選擇擁有該類名的元素(如這裏，先開始給p標籤從第二個元素開始選擇，若是擁有該類名則選中，再給span標籤的第二個元素開始選擇，若是擁有該類名則選中)。

總結：

nth-child:

用標籤進行選擇：如p:nth-child（n+2）對父級元素的子元素進行統計，從第二個子元素開始判斷，若是是該標籤則選中
用類名進行選擇：如.div：nth-child(n+2) 同理，對父級元素的子元素進行統計，從第二個子元素開始判斷，若是子元素擁有該類目則選中。

nth-of-type:

用標籤進行選擇：如p:nth-of-type（n+2）父級元素的p標籤的子元素，從第二個p標籤開始選中
用類名進行選擇：如.div：nth-of-type(n+2) 父級元素擁有class=「div"的全部不一樣的標籤並分別進行判斷，分別對不一樣的標籤的第二個元素開始判斷，若是擁有class=「div」的類名則選中。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。