nth-child()选择器怎么用？:nth-child(3n+1)是什么意思？

• • 腾讯云建站教程
  • 宝塔面板建站教程
  • 老薛主机建站教程
  • SiteGround建站教程

nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

看看这个你就明白了：

序号写法：

li:nth-child(3){background:orange;}/*把第 3 个 LI 的背景设为橙色*/

倍数写法：

li:nth-child(3n){background:orange;}/*把第 3、第 6、第 9、…、所有 3 的倍数的 LI 的背景设为橙色*/

倍数分组匹配：

li:nth-child(3n+1){background:orange;}/*匹配第 1、第 4、第 7、…、每 3 个为一组的第 1 个 LI*/
li:nth-child(3n+5){background:orange;}/*匹配第 5、第 8、第 11、…、从第 5 个开始每 3 个为一组的第 1 个 LI*/
li:nth-child(5n-1){background:orange;}/*匹配第 5-1=4、第 10-1=9、…、第 5 的倍数减 1 个 LI*/

答案来自赏怀曼

本文地址：https://boke112.com/article/p4286.html