小編給大家分享一下css偽類之nth-child()有什么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出錫山免費(fèi)做網(wǎng)站回饋大家。

在CSS3中nth-child()偽類對于在HTML中創(chuàng)建格式化的Excel樣式表非常有用。也用于生成網(wǎng)格布局而不必求助于表格。

首先我們來了解一下nth-child()偽類的相關(guān)知識。

nth-child()偽類的基本規(guī)則：

我們使用的語法是  ：nth-child（a n + b）其中a是頻率，b是初始偏移量。這生成了一個從n = 0開始的無限級數(shù)，但只包含正值。

一些例子可能會使這更清楚：

2n，2n + 0
   2,4,6,8,10,12 ......

2n + 1或奇數(shù)
   1,3,5,7,9,11 ......

2n + 2
   2,4,6,8,10,12 ......

2n + 3
   3,5,7,9,11,12 ......

2n + 4
   4,6,8,10,12,14 ......

3n，3n + 0或3n + 3
   3,6,9,12,15,18 ......

3n + 1
   1,4,7,10,13,16 ......

因此，你可以看到系列從b開始，然后為每個值增加a。跳過任何零或負(fù)的結(jié)果意味著我們不能在DOM樹中向后看。

nth-child()偽類的示例：

接下來我們通過示例來看看nth-child()偽類的作用：

示例一：和懸停一起連用

這個例子使用了nth-child偽類和 ~ 一般兄弟選擇器。

首先，我們通過簡單地向左側(cè)浮動多個div容器并使用nth-child在每十個框之后開始一個新行來創(chuàng)建網(wǎng)格：

#stage div {
    float: left;
    margin: 5px;
    width: 60px;
    height: 50px;
    background: #efefef;
}
#stage div:hover { background: red; }
#stage div:nth-child(10n+1) { clear: left; }

在HTML中，我們?yōu)槊總€div容器（＃div1，＃div2，...，＃div100）添加了一個id，然后分配了一個懸停事件，如下所示：

#div1:hover ~ div:nth-child(1n) {
   background: yellow; 
}
#div2:hover ~ div:nth-child(2n) {
   background: yellow; 
}
#div3:hover ~ div:nth-child(3n) {
   background: yellow; 
}
#div4:hover ~ div:nth-child(4n) {
   background: yellow; 
}
...

這意味著當(dāng)光標(biāo)在某個div 上時，這個div的每個第n個兄弟都將變?yōu)辄S色。例，當(dāng)鼠標(biāo)懸停在數(shù)字3（＃div3）上時，它會變?yōu)榧t色，而每個3的倍數(shù)的div變?yōu)辄S色。試試吧，我們來看看效果：

實(shí)例二：使用nth-child格式化table表格

CSS中一個更典型的示例就是如何格式化HTML表格，讓其看起來更專業(yè) 。 例如：交替的列或行顏色：

雖然不是非常漂亮，但標(biāo)記非常簡單，你可以輕松更改顏色。對于'tartan'表格的效果，我們使用的背景顏色具有一些alpha透明度，因此當(dāng)列（紅色）和行（藍(lán)色）顏色相遇時，會產(chǎn)生第三種（紫色）顏色。

對于此示例，table表格的class值為“tartan”：

.tartan tr:nth-child(odd) {
    background: rgba(0,0,255,0.5);
}
.tartan td:nth-child(even) {
    background: rgba(255,0,0,0.5);
}

如果要直接定位相交的單元格，以便不需要透明背景也能夠指定其他顏色，我們還可以使用：

.tartan tr:nth-child(odd) td:nth-child(even) {
    background: #fff;
}

這里針對的是表格所有奇數(shù)行的奇數(shù)單元格和偶數(shù)行的偶數(shù)單元格，我們看看效果：

在以上樣式中，你應(yīng)該注意到了，我們使用了奇數(shù)和偶數(shù)的簡寫方法，這樣更方便記憶。

看完了這篇文章，相信你對css偽類之nth-child()有什么用有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！