<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[CSS nth-child（n）用法]]> apao <apao@www.apao.idv.tw> Thu, 15 Apr 2021 03:58:10 +0000 https://blog.apao.idv.tw/post// 點擊在新視窗中瀏覽此圖片
為了客戶要在就程式中加上某些功能，又不能動到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/
Tags - , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] CSS nth-child（n）用法]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment