200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > css学习选择器之:nth-child(n)【HTML】

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

时间:2020-01-08 14:31:14

相关推荐

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

web前端|html教程

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

web前端-html教程

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

智能雷源码,镜像源ubuntu文件,tomcat服务器改ip,爬虫怎么注释,威盾PHP源码加密,杭州自动seolzw

这时候一个有意思的朋友出现了,:nth-child(n) 一直在那蹦?着说“找我呀”,这个是说选择器匹配属于其父元素的第N个子元素,从0开始,比如说p:nth-child(2)指下标为2的p元素,就是第3个元素;然后如果想实现奇偶行不同,奇数可以直接用odd,偶数直接用even,方便,如果用(2n+1),(2n)也OK的;

php源码保护,ubuntu使用pe安装,小白怎么用爬虫,php path ..,seo sang minlzw

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

跟下面效果是一样一样的:

wp 交易源码,ubuntu麒麟软件中心,容易训练的爬虫,$get php,seo人群知识lzw

.history-content:nth-child(odd) {background: #D8F0E7;}.history-content:nth-child(even) {background: #eee;}.history-content:hover {background: #fff;}

最后效果是这样的,一行灰色,一行绿色,触碰成白色

菜鸟学习,如有更好的,敬请交流!哈

版权声明:本文为博主原创文章,未经博主允许。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。