2013年12月27日

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

好的,這篇是屬於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標籤"…

image

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…

參考資料

1 則留言:

  1. Thanks for sharing, nice post!

    Chia sẻ các bạn chích ngừa ung thư cổ tử cung bao nhiêu lần tốn bao nhiêu tiền hay chích ngừa ung thư cổ tử cung bao nhiêu mũi"> trong bao lâu hay chích ngừa ung thư cổ tử cung bao nhiêu tuổi ở Việt Nam thì độ tuổi bao nhiêu chích ngừa được hay xét nghiệm ung thư cổ tử cung giá bao nhiêu hay ai thích nuôi gà thì tham khảo cách nuôi gà chọi có lực đá tốt nhất hay cách nuôi gà tre đá có lực dành cho gà chọi cưng hay bài viết cách nuôi gà đá cua sat có lực hay chia sẻ hướng dẫn cách cách vần gà chọi hiệu quả nhất hay gậy tự sướng giá bao nhiêu mua ở đâu hay bạn muốn chích ngừa chích ngừa ung thư cổ tử cung bao nhiêu tiền thì tham khảo giá hay hướng dẫn cách nuôi gà chọi đá có lực cho những ai thích nuôi gà đá.

    回覆刪除