下面通过几个例子说明,相信你一看就明白
:nth-child(2)表示选取第几个标签,”2可以是你想要的数字”
:nth-child(n+4)选取大于等于4标签,”n”表示从整数
:nth-child(-n+4)选取小于等于4标签
:nth-child(2n)选取偶数标签,2n也可以是even
:nth-child(2n-1)选取奇数标签,2n-1可以是odd
:nth-child(3n+1)自定义选取标签,3n+1表示”隔二取一”
:last-child选取最后一个标签
:nth-last-child(3)选取倒数第几个标签,3表示选取第3个
在开发中,需要这样一个需求,需要找到第n个孩子元素。一时想不起来应该怎么写,经过查阅后得知。
因此记录一下,以免日后再忘记。
:nth-child 是CSS伪类,它首先找到所有当前元素的兄弟元素,然后按照位置 先后顺序从1开始排序 ,选择的结果为CSS伪类:nth-chilid括号中表达式(an+b)匹配到的元素集合。(n=0,1,2,3)。
tr:nth-child(2n+1)
表示表格中的奇数行
tr:nth-child(odd)
表示表格汇总的奇数行
tr:nth-child(2n)
表示表格中的偶数行
tr:nth-child(even)
表示表格中的偶数行
span:nth-child(0n+1)
表示子元素中第一个且为span的元素,与:first-child选择器的作用相同
span:nth-child(-n+3)
匹配前三个子元素中的span元素
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
1、首先打开Vscode编辑器,新建一个HTML文档,用于承载表格和CSS。
2、然后新建一个5行3列的<table>表格备用。
3、接着定义一个内联样式,设置table表格的偶数行even背景色为浅灰色,奇数行odd的背景色为蓝色。
4、保存以上内容,在浏览器预览效果,就能看到奇数行景色为蓝色,偶数行背景色为浅灰色的效果了。