CSS3:nth-child()偽類選擇器用法詳解

2018年06月25日 07:58:27益點益滴1274

關于CSS3選擇器查詢可以參閱益吾庫之前分享的史上最全CSS3選擇器集合,今天我們單講:nth-child()這個偽類選擇器的用法,除了 IE8 及更早版本,所有主流瀏覽器均支持 :nth-child() 選擇器。:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素,不論元素的類型。 n 可以是數字、關鍵詞或公式;Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞(第一個子元素的下標是 1);使用公式 (an + b)。描述:表示周期的長度,n 是計數器(從 0 開始),b 是偏移值。下面我們分5種寫法來舉例說明:

第一種:簡單數字序號寫法

:nth-child(number)

直接匹配第number個元素。參數number必須為大于0的整數。

例子:

li:nth-child(3){background:orange;}

第二種:倍數寫法

:nth-child(an)

匹配所有倍數為a的元素。其中參數an中的字母n不可缺省,它是倍數寫法的標志,如3n、5n。

例子:

li:nth-child(3n){background:orange;}

第三種:倍數分組匹配

:nth-child(an+b) 與 :nth-child(an-b)

先對元素進行分組,每組有a個,b為組內成員的序號,其中字母n和加號+不可缺省,位置不可調換,這是該寫法的標志,其中a,b均為正整數或0。如3n+1、5n+1。但加號可以變為負號,此時匹配組內的第a-b個。(其實an前面也可以是負號,但留給下一部分講。)

例子:

li:nth-child(3n+1){background:orange;}

li:nth-child(3n+5){background:orange;}

li:nth-child(5n-1){background:orange;}

li:nth-child(3n±0){background:orange;}

li:nth-child(±0n+3){background:orange;}

li:nth-child(-n+9){background:orange;} /*前9個*/

li:nth-child(n+6){background:orange;} /*從第6個開始*/

li:nth-child(-n+9):nth-child(n+6){background:orange;} /*選擇第6個到第9個,前兩例交集*/

注:需按倒數選擇元素時可用:nth-last-child

第四種:反向倍數分組匹配

:nth-child(-an+b)

此處一負一正,均不可缺省,否則無意義。這時與:nth-child(an+1)相似,都是匹配第1個,但不同的是它是倒著算的,從第b個開始往回算,所以它所匹配的最多也不會超過b個。

例子:

li:nth-child(-3n+8){background:orange;}

li:nth-child(-1n+8){background:orange;}

第五種:奇偶匹配

:nth-child(odd) 與 :nth-child(even)

分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣;偶數(even)與(2n+0)及(2n)結果一樣。
表格奇偶數行定義樣式就可以寫成
.table > tr:nth-child(even) > td {background-color: #ccc;}  (偶數行)
.table > tr:nth-child(odd) > td {background-color: #ccc;}  (奇數行)

超贊,真給力!嗯,必須鼓勵~

打賞 1

歡迎點評!或反饋疑問...

支持Ctrl+Enter提交
暫無留言,快搶沙發!
賬號:mxy310@163.com[復制]
賬號:77940140[復制]

深切哀悼

抗擊新冠肺炎疫情斗爭犧牲烈士和逝世同胞!

×
M
海南环岛赛彩票奖金