CSS3选择器nth-child(n)实现隔几行选择元素

基础语法解析 #

nth-child(n) 选择器的核心语法是：nth-child(an+b)

• n：从 0 开始的自然数序列 (0,1,2...)
• a：周期长度
• b：起始偏移量

序号写法 #

/* 选中第三个<li>元素 */
li:nth-child(3) {
  background: orange; /* 原始注释：把第3个LI的背景设为橙色 */
}

倍数写法 #

/* 选中所有3的倍数元素 */
li:nth-child(3n) {
  background: orange; /* 原始注释：第3、6、9...个LI */
}

倍数分组匹配 #

/* 3n+1 模式（每3个为一组选第1个） */
li:nth-child(3n + 1) {
  background: orange; /* 匹配第1、4、7... */
}

/* 3n+5 模式（从第5个开始每3个选1个） */
li:nth-child(3n + 5) {
  background: orange; /* 匹配第5、8、11... */
}

/* 5n-1 模式（反向选择） */
li:nth-child(5n-1) {
  background: orange; /* 匹配第4、9、14... */
}