goTOP
April 15, 2021

CSS nth-child(n)用法

| |
網頁語言 » CSS | 閱覽(173) | Posted by apao at 11:58
點擊在新視窗中瀏覽此圖片
為了客戶要在就程式中加上某些功能,又不能動到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/
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我