CSS - Structural Pseudo-Classes 的nth-of-type和nth-child

27 December 2013 — Written by Sky Chang

好的，這篇是屬於CSS很基本的東西…但小弟前幾天被這個搞了一整天… ( 該重修CSS了..Orz.. )，所以為了讓自己更加有印象，就寫一下這篇文章嚕…至於CSS的高手們，就不要校小弟啦XDDD

nth-of-type和nth-child是屬於CSS Structural Pseudo Classes的其中幾個，而前幾天才發現，小弟自己的觀念錯誤QQ…直到後來，才深深領悟…是怎樣的範例呢…我們先來看一下範例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .aa:nth-of-type(2) { color: red; }
        </style>
    </head>
    <body>
    <section>
        <div>123</div>
        <div class="aa">我是第1個p標籤</div>
        <div class="aa">我是第2個p標籤</div>  <!-- 希望這個變紅 -->
    </section>        
    </body>
</html>

是的，就是這種簡單的範例，我們利用nth-of-type來選擇要變紅色的區段，而小弟一直預期，應該是第二個標籤會變成紅色… ( 我的觀念錯得離譜，對不起大家QQ )

但結果卻是… ( 喔，至於為什麼div裡面寫著我是p標籤…那是因為我忘記把p標籤這三個字改成我是"我是div標籤"…

Orz…竟然是第一個變紅色….好吧，看到這邊，想笑我的人就笑吧XDDDD，我就真的搞錯觀念了嘛…我們先來看看w3cschool的敘述

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

嗯…小弟一直以為，因為小弟是使用class ( .aa:nth-of-type )來當篩選，所以應該會是去尋找所有的.aa，但實際上，不是這樣啊….

那實際上到底應該是怎樣呢??實際上.aa:nth-of-type的意思是指，找出有.aa這個class的元素(也就是div)，然後這個div的父原素(也就是body)，底下的第幾個div..

所以以上面的案例來說，第二個div是就是"我是第一個p標籤"阿!!~…..

所以，.aa:nth-of-type如字面所說，適用type去尋找…而這個type就是div…

那nth-child呢??…如果我們把上面的範例改成nth-child(2)，如下Code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .aa:nth-child(2) { color: red; }
        </style>
    </head>
    <body>
    <section>
        <div>123</div>
        <div class="aa">我是第1個p標籤</div>
        <div class="aa">我是第2個p標籤</div>  <!-- 希望這個變紅 -->
    </section>        
    </body>
</html>

那基本上還是和上面得到的結果是一樣的…那.aa:nth-child是甚麼意思呢?..簡單的說，就是找到.aa這個class後( div )，上面那層父元素( body )，底下的第二個div元素…

所以，結果還是"我是第1個p標籤"會變成紅色…

基本上就是這樣了QQ….所以，我的CSS應該要重修了QQ…

CSS - Structural Pseudo-Classes 的nth-of-type和nth-child

參考資料