武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：:nth-child()工作原理.

這是一個(gè)css選擇器，一個(gè)真正的偽類選擇器，它就是nth-child(),下面是使用它的范例。
ul li:nth-child(3n+3) {
color: #ccc;
}

上面的css是干什么用的，它就是在無序列表里面選擇是3倍數(shù)的列。也就是第3個(gè)，第6個(gè)，第9個(gè)等等。但是它工作原理是怎樣的那？如果遇到其它情況你又如何使用nth-child那？

總的來說nth-child()圓括號(hào)里面支持兩個(gè)關(guān)鍵詞：even與odd。他們應(yīng)該很明顯的，even選擇偶數(shù)標(biāo)簽，如第2、第4、第6等等。odd選擇奇數(shù)標(biāo)簽，如第1，第3，第5等等。

正如你在第一個(gè)例子里面看到的，nth-child()的圓括號(hào)里也支持方程式的，是最簡(jiǎn)單的方程式嗎？?jī)H僅是數(shù)字。如果你在圓括號(hào)里面輸入一個(gè)數(shù)字，那它僅僅選擇這個(gè)數(shù)目對(duì)應(yīng)的那個(gè)標(biāo)簽。比如，如何僅僅選擇第5個(gè)標(biāo)簽元素。
ul li:nth-child(5) {
color: #ccc;
}

讓我們回到剛開始例子里面的“3n+3”上面吧，他的工作原理是怎樣的？為什么他僅僅選擇3倍數(shù)的標(biāo)簽元素？這里就要理解“n”與數(shù)學(xué)方程式的計(jì)算。

“n”則表示大于等于0的整數(shù)。由此可見 3n就是3 x n，這個(gè)方程式就可以解釋為”(3xn)+3″,也就是n為0或大于0的整數(shù)。于是我們可以得到
(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)又是怎么計(jì)算的那？
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
等等

稍等！這跟“odd”是一樣的！所以”1“就沒有必要多次出現(xiàn)了。現(xiàn)在，再看我們?cè)瓉淼睦泳透杏X代碼復(fù)雜了些。我們可以用“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就可以做到同樣的效果。我們也可以使用負(fù)數(shù)。在方程式里面使用減法，如4n-1；
(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
等等

使用“-n”值看起來有點(diǎn)古怪。如果方程式計(jì)算得到的值是負(fù)數(shù)，他就不指定任何元素標(biāo)簽。正如結(jié)果展示的那樣，這是一個(gè)相當(dāng)聰明的技術(shù)，你可以使用“-n+3”選擇選擇前幾個(gè)元素標(biāo)簽。

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
等等。

站點(diǎn)有很好的參數(shù)講解與指導(dǎo)，包括一些手動(dòng)列表。我直接發(fā)布到這里了！

n2n+14n+14n+44n5n-2-n+3

0114--3

1358432

25912881

3713161213-

4917201618-

51121242023-

相關(guān)文章推薦
:nth-child()
Understanding :nth-child Pseudo-class Expressions

中文原文：nth-child()工作原理
英文原文：How nth-child Works