CSS中：nth-child的用法

html-css019

CSS中：nth-child的用法,第1张

做前端一定要记住:nth-child(2)这个选择器，它可以帮你轻松选择你想要的标签并给与修改添加样式

下面通过几个例子说明，相信你一看就明白

: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