1. 程式人生 > >css學習選擇器之:nth-child(n)

css學習選擇器之:nth-child(n)

今天新學習了一個小效果,網站比如說實現間行顏色變化,比如說一行黑,一行白,好吧,斑馬就出現了,當你滑鼠觸碰某一行,顏色背景變化,尤其是當你連線資料庫時,簡單的程式碼就顯得很重要了.

這時候一個有意思的朋友出現了,:nth-child(n)  一直在那蹦躂著說“找我呀”,這個是說選擇器匹配屬於其父元素的第N個子元素,從0開始,比如說p:nth-child(2)指下標為2的p元素,就是第3個元素;然後如果想實現奇偶行不同,奇數可以直接用odd,偶數直接用even,方便,如果用(2n+1),(2n)也OK的;

.history-content:nth-child(2n+1) {
	background: #D8F0E7;
}
.history-content:nth-child(2n) {
	background: #eee;
}
.history-content:hover {
	background: #fff;
}

跟下面效果是一樣一樣的:
.history-content:nth-child(odd) {
	background: #D8F0E7;
}
.history-content:nth-child(even) {
	background: #eee;
}
.history-content:hover {
	background: #fff;
}
最後效果是這樣的,一行灰色,一行綠色,觸碰成白色


菜鳥學習,如有更好的,敬請交流!哈