关于css3属性nth-child的用法大全

小明爱学习

发布于 2020-02-25 12:05:22

5320

发布于 2020-02-25 12:05:22

css3中有很多新增的功能，让我们以前不得不用js才能完成功能，现在用css就可以完成。

1.设置单双行

 ul li:nth-child(odd){background-color:green;}/*设置单行样式*/
 ul li:nth-child(even){background-color:gray}/*设置双行样式*/

2.设置每隔3个应用样式

ul li:nth-child(3n){background-color:green;}/* 3,6,9,12... */

3.指定元素

ul li:nth-child(4){background-color:green;}/*单独设置第四个li*/

4.自定义起始元素

ul li:nth-child(3n+2){background-color:green;}/*匹配2,5,8,11...*/

5.(n+number)形式

ul li:nth-child(n+6){background-color:green;}/*从第六个li开始匹配*/
ul li:nth-child(-n+6){background-color:green;}/*匹配1-6的元素*/

6.自定义区间

ul li:nth-child(n+3):nth-child(-n+5){background-color:green;}/*匹配3-5的元素*/

7.nth:child(3n-1)

ul li:nth-child(3n-1){background-color:green;}/*匹配(3-1),(6-1),(9-1)....*/

上面的七种基本是nth:chlid的全部用法，可以混合使用来实现更复杂的筛选

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020年02月22日，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度