:nth-child(n)選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類(lèi)型:nth-of-type(n)匹配同類(lèi)型中的第n個(gè)同級(jí)兄弟元素
區(qū)別：
nth-child(n) : 匹配父元素中的第 n 個(gè)子元素，元素類(lèi)型沒(méi)有限制。
nth-of-type(n) : 匹配同類(lèi)型中的第n個(gè)同級(jí)兄弟元素。
n可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式，比如：nth-child(odd) 奇數(shù) ,nth-child(even) 偶數(shù)。
nth-child和nth-of-type的不同之處就是查找元素的方式不同。前者是查找兄弟元素中某個(gè)絕對(duì)位置的元素，后者是查找同類(lèi)型元素中某個(gè)絕對(duì)位置的元素。相同：都是找到元素之后再與前面的選擇符進(jìn)行匹配，這里的匹配方式是一樣的。
一、簡(jiǎn)單數(shù)字序號(hào)寫(xiě)法:nth-child(number)
:nth-child(number)直接匹配第number個(gè)元素。參數(shù)number必須為大于0的整數(shù)。
/* 把第3個(gè)LI的背景設(shè)為橙色 */
li:nth-child(3){
background:orange;
}
二、倍數(shù)寫(xiě)法:nth-child(an)
:nth-child(an)匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫(xiě)法的標(biāo)志，如3n、5n。
/* 把第3、第6、第9、…、所有3的倍數(shù)的LI的背景設(shè)為橙色 */
li:nth-child(3n){
background:orange;
}
三、倍數(shù)分組匹配:nth-child(an+b) 與 :nth-child(an-b)
:nth-child(an+b) 與 :nth-child(an-b)先對(duì)元素進(jìn)行分組，每組有a個(gè)，b為組內(nèi)成員的序號(hào)，其中字母n和加號(hào)+不可缺省，位置不可調(diào)換，這是該寫(xiě)法的標(biāo)志，其中a,b均為正整數(shù)或0。如3n+1、5n+1。但加號(hào)可以變?yōu)樨?fù)號(hào)，此時(shí)匹配組內(nèi)的第a-b個(gè)。（其實(shí)an前面也可以是負(fù)號(hào)，但留給下一部分講。）
/* 匹配第1、第4、第7、…、每3個(gè)為一組的第1個(gè)LI*/
li:nth-child(3n+1){
background:orange;
}
/*匹配第5、第8、第11、…、從第5個(gè)開(kāi)始每3個(gè)為一組的第1個(gè)LI */
li:nth-child(3n+5){
background:orange;
}
/*匹配第5-1=4、第10-1=9、…、第5的倍數(shù)減1個(gè)LI*/
li:nth-child(5n-1){
background:orange;
}
/*相當(dāng)于(3n)*/
li:nth-child(3n±0){
background:orange;
}
/*相當(dāng)于(3)*/
li:nth-child(±0n+3){
background:orange;
}
四、反向倍數(shù)分組匹配:nth-child(-an+b)
:nth-child(-an+b)此處一負(fù)一正，均不可缺省，否則無(wú)意義。這時(shí)與:nth-child(an+1)相似，都是匹配第1個(gè)，但不同的是它是倒著算的，從第b個(gè)開(kāi)始往回算，所以它所匹配的最多也不會(huì)超過(guò)b個(gè)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-698942.html
/*匹配第8、第5和第2個(gè)LI*/
li:nth-child(-3n+8){
background:orange;
}
/*或(-n+8)，匹配前8個(gè)（包括第8個(gè)）LI，這個(gè)較為實(shí)用點(diǎn)，用來(lái)限定前面N個(gè)匹配常會(huì)用到*/
li:nth-child(-1n+8){
background:orange;
}
五、奇偶匹配:nth-child(odd) 與 :nth-child(even)
:nth-child(odd) 與 :nth-child(even)分別匹配序號(hào)為奇數(shù)與偶數(shù)的元素。奇數(shù)(odd)與(2n+1)結(jié)果一樣；偶數(shù)(even)與(2n+0)及(2n)結(jié)果一樣。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-698942.html
//（偶數(shù)行）
.table > tr:nth-child(even) > td {
background-color: #ccc;
}
//（奇數(shù)行）
.table > tr:nth-child(odd) > td {
background-color: #ccc;
}
到了這里，關(guān)于【css】css奇數(shù)、偶數(shù)、指定數(shù)選擇器：的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
