首页
视频
资源
登录
原
css3 中的 nth-child
3872
人阅读
2020/11/17 15:43
总访问:
337313
评论:
0
收藏:
0
手机
分类:
前端
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。 <br/> 1. e:first-child 选取第一个元素,在css添加 ```css li:first-child{ background-color: blue; } ``` 2.e.last-child 选取最后一个元素 ```css li:last-child{ background-color: pink; } ``` 3.e.nth-child(number) 选取里面第几个的元素 ```css li:nth-child(4){ background-color: plum; } ``` 4 e.nth-child(2n); 选取里面偶数元素 ``` li:nth-child(2n){ background-color: green; } ``` 5.e:nth-child(2n-1) 选取里面奇数的元素 ``` li:nth-child(2n-1){ background-color: #ffabcd; } ``` 6.e:nth-child(n+3) 选取从里面第三个开始到最后一个 ``` li:nth-child(n+3){ background-color: blanchedalmond; } ``` 7.e:nth-child(-n+3) 选取从0到第三个的所有元素 ``` li:nth-child(-n+3){ background-color: indianred; } ``` 8.e:nth-last-child(3) 选取倒数第三个元素 ``` li:nth-last-child(3){ background-color: #ffabcd; } ``` 9.e:nth-last-child(n+3) 选取从倒数第三到第一个之间的元素 ``` li:nth-last-child(n+3){ background-color: #ffabcd; } ```
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
小见
吃亏决不亏,惜福才有福
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
云服务
10篇
计算机基础
2篇
NET
5篇
.NET
7篇
后端
4篇
前端
24篇
EF
4篇
随笔
5篇
数据库
1篇
.net core
3篇
linux
2篇
微服务
1篇
移动开发
1篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术