您现在的位置:首页 >> 前端 >> 内容

css学习选择器之:nth-child(n)

时间:2015/8/25 10:34:22 点击:

  核心提示:今天新学习了一个小效果,网站比如说实现间行颜色变化,比如说一行黑,一行白,好吧,斑马就出现了,当你鼠标触碰某一行,颜色背景变化,尤其是当你连接数据库时,简单的代码就显得很重要了.这时候一个有意思的朋友...

今天新学习了一个小效果,网站比如说实现间行颜色变化,比如说一行黑,一行白,好吧,斑马就出现了,当你鼠标触碰某一行,颜色背景变化,尤其是当你连接数据库时,简单的代码就显得很重要了.

这时候一个有意思的朋友出现了,: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;
}
最后效果是这样的,一行灰色,一行绿色,触碰成白色

 

css学习选择器之:nth-child(n)

 

Tags:CS SS S学 学习 
作者:网络 来源:微也的博客