CSS僞類選擇器nth-child 選擇3的倍數個元素寫法
web開發中,經常有對清單的3倍數清單項單獨設定樣式的需求。
ul li:nth-child(3n+3) {
color: #ccc;
}
上面的css是幹什麼用的,它就是在無序清單裡面選擇是3倍數的列。也就是第3個,第6個,第9個等等。但是它工作原理是怎樣的那?如果遇到其它情況你又如何使用nth-child那?
總的來說nth-child()圓括号裡面支援兩個關鍵詞:even與odd。他們應該很明顯的,even選擇偶數标簽,如第2、第4、第6等等。odd選擇奇數标簽,如第1,第3,第5等等。
正如你在第一個例子裡面看到的,nth-child()的圓括号裡也支援方程式的,是最簡單的方程式嗎?僅僅是數字。如果你在圓括号裡面輸入一個數字,那它僅僅選擇這個數目對應的那個标簽。比如,如何僅僅選擇第5個标簽元素。
ul li:nth-child(5) {
color: #ccc;
}
讓我們回到剛開始例子裡面的“3n+3”上面吧,他的工作原理是怎樣的?為什麼他僅僅選擇3倍數的标簽元素?這裡就要了解“n”與數學方程式的計算。
“n”則表示大于等于0的整數。由此可見 3n就是3 x n,這個方程式就可以解釋為”(3xn)+3″,也就是n為0或大于0的整數。于是我們可以得到
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
等等
:nth-child(2n+1)又是怎麼計算的那?
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
等等
稍等!這跟“odd”是一樣的!是以”1“就沒有必要多次出現了。現在,再看我們原來的例子就感覺代碼複雜了些。我們可以用“3n+0”甚至“3n”代替“3n+3”.
(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
等等
正如你所看到的,我們不用+3就可以做到同樣的效果。我們也可以使用負數。在方程式裡面使用減法,如4n-1;
(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
等等
使用“-n”值看起來有點古怪。如果方程式計算得到的值是負數,他就不指定任何元素标簽。正如結果展示的那樣,這是一個相當聰明的技術,你可以使用“-n+3”選擇選擇前幾個元素标簽。
-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
等等。
一些常用的css僞類選擇文法:
n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
---|---|---|---|---|---|---|
1 | 1 | 4 | - | - | 3 | |
1 | 3 | 5 | 8 | 4 | 3 | 2 |
2 | 5 | 9 | 12 | 8 | 8 | 1 |
3 | 7 | 13 | 16 | 12 | 13 | - |
4 | 9 | 17 | 20 | 16 | 18 | - |
5 | 11 | 21 | 24 | 20 | 23 | - |
轉載位址: https://blog.csdn.net/kerryqpw/article/details/78237467