標題：CSS nth-child（n）用法
出處：A.PAO designSTUDIO BLOG
時間：Thu, 15 Apr 2021 11:58:10 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1396/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4160

為了客戶要在就程式中加上某些功能，又不能動到inc模組的狀況下，改變CSS版型，就只能動用更新的CSS3設定來輔助顯示。如果沒有事前的定義，除了first-child, last-child 的方法，之外 nth-child（n）也是不錯的用法，但是要多注意上層的 Class 定義，才能完美定義出自己想要的CSS3樣式。

以table tr 元素為例：
odd：為奇數
nth-child(odd)
tr:nth-child(odd){background:#808080}

even：為偶數
tr:nth-child(odd){background:#808080}


n可放入數字：以 ul li 元素為例：
前方開始的用法：
:nth-child(n)

:nth-child(3)
說明：設定於列表中的第（3）個標籤（li）
li:nth-child(3){background:#808080}

:nth-child(2n)
說明：設定於列表中的偶數標籤（li）
li:nth-child(2n){background:#808080}

:nth-child(2n-1)
說明：設定於列表中的奇數標籤（li）
li:nth-child(2n-1){background:#808080}


後方開始的用法：以 ul li 元素為例：
:nth-last-child(n)

:nth-last-child(3)
說明：後面算來第三個元素
li:nth-last-child(3){background:#808080}


:nth-last-child(-n+3)
說明：最後算來三個元素
li:nth-last-child(-n+3){background:#808080}


:nth-last-child(5n)
說明：最後算來五的倍數的元素
li:nth-last-child(3){background:#808080}


參考網站：
http://www.csrdat.org.tw/


Generated by Bo-blog 2.1.1 Release