首頁 >web前端 >css教學 >css偽類之nth-child()範例詳解

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

青灯夜游
青灯夜游原創
2018-11-07 10:31:304614瀏覽

本篇文章帶給大家的內容是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變成黃色。試試看吧,讓我們來看看效果:

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

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

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

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

雖然不是非常漂亮,但標記非常簡單,你可以輕鬆更改顏色。對於'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;
}

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

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

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn