nth-child 學習筆記

ul li:nth-child(3n+3){

}

上面這段代碼如何工做的呢.

括號中參數 能夠接收兩個關鍵字, even odd ;

even 表示只選擇 偶數位的元素 第2 4 6 8 10.....項元素

odd 表示只選擇 奇數位的元素 第1 3 5 7 9.....項元素

也能夠接收一個表達式

最簡單的表達式 僅有一個數字 就足夠 若是你傳入一個數字 2 那麼他僅僅選中第二個元素

那麼 當表達式是 3n+3 的時候,他是如何工做的呢.

其實 n 是一個從 0 開始的 正整數數組 [0,1,2,3,4,5....]

因此只要把這個數組裏的每一項帶入這個表達式計算一下

3*0 +3 =3

3*1 +3 = 6

3*2 +3 =9

能夠看出 這個表達式選中的是 項數爲 3 6 9 12..... 的元素

小練習 若是你要選中 1 10 11 21 項的 元素應該怎麼作呢.

根據上面的 例子 咱們能夠推論出

表達式 應該是這樣的

10*0 +1 =1

10*1 +1 =11

10*2 +1 =21

因此最終的表達式應該是 (10n+1)

css-tricks.com/how-nth-chi…