css偽類之nth-child()範例詳解

本篇文章帶給大家的內容是css偽類之nth-child()範例詳解，讓大家了解nth-child()偽類可以做什麼。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

在CSS3中nth-child()偽類別對於在HTML中建立格式化的Excel樣式表非常有用。也用於生成網格佈局而不必求助於表格。

首先我們來了解nth-child()偽類別的相關知識。 【相關影片教學推薦：css教學，css3教學！ 】

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

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

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

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

2n 1或奇數
   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。跳過任何零或負的結果意味著我們不能在DOM樹中向後看。

nth-child()偽類別的範例：

#接下來我們透過範例來看看nth-child()偽類別的作用：

範例一：和懸停一起連用

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

首先，我們透過簡單地向左側浮動多個div容器並使用nth-child在每十個框之後開始一個新行來建立網格：

#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中，我們為每個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; 
}
...

這意味著當遊標在某個div 上時，這個div的每個第n個兄弟都將變成黃色。例，當滑鼠懸停在數字3（＃div3）上時，它會變成紅色，而每個3的倍數的div變成黃色。試試看吧，讓我們來看看效果：

實例二：使用nth-child格式化table表格

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

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

對於此範例，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;
}

這裡針對的是表格所有奇數行的奇數單元格和偶數行的偶數單元格，我們來看看效果：

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

總結：以上就是這篇文章關於nth-child()偽類使用的全部介紹，大家可以自己動手使用nth-child()偽類實現效果，加深理解，希望能對大家的學習有所幫助。

以上是css偽類之nth-child()範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！