在css中，:nth-child选择器可以根据元素在其父元素中的位置匹配对应的元素，通过合理设置参数就能实现各类循环样式效果，不需要额外编写js逻辑，能有效简化前端开发流程。
:nth-child选择器基础语法
:nth-child选择器的语法格式为:nth-child(an+b)，其中a和b是自定义的整数，n是从0开始递增的自然数。该表达式会匹配所有满足位置等于an+b的元素，当an+b的结果小于等于0时，不会匹配任何元素。
常见的参数用法有以下几种：
:nth-child(odd)：匹配位置为奇数的元素，等价于:nth-child(2n+1):nth-child(even)：匹配位置为偶数的元素，等价于:nth-child(2n):nth-child(3n)：匹配位置为3、6、9...的元素，也就是每3个元素匹配一次:nth-child(3n+1)：匹配位置为1、4、7...的元素，从第1个开始每3个匹配一次
实现2周期循环样式
最常见的循环样式是奇偶行交替，比如列表项奇数行浅灰背景，偶数行白色背景，只需要用odd和even参数即可实现。
示例代码如下：
/* 父容器为ul，子元素为li */
ul li:nth-child(odd) {
background-color: #f5f5f5;
}
ul li:nth-child(even) {
background-color: #ffffff;
}
如果希望从第三个元素开始交替，也可以调整表达式：
/* 第3、5、7...个元素浅灰背景，第4、6、8...个元素白色背景 */
ul li:nth-child(2n+3) {
background-color: #f5f5f5;
}
ul li:nth-child(2n+4) {
background-color: #ffffff;
}
实现3周期及以上循环样式
当需要每3个元素循环一次样式时，可以设置不同的an+b表达式，分别匹配不同位置区间的元素。
比如要实现3个卡片为一组，分别设置蓝、绿、黄三种背景色，代码如下：
/* 卡片容器为card-list，子元素为card */
.card-list .card:nth-child(3n+1) {
background-color: #e3f2fd;
}
.card-list .card:nth-child(3n+2) {
background-color: #e8f5e9;
}
.card-list .card:nth-child(3n+3) {
background-color: #fff8e1;
}
如果需要实现4周期循环，只需要把表达式中的3换成4，再分别设置4个不同的样式规则即可，原理和3周期完全一致。
结合其他选择器实现复杂循环
:nth-child还可以和其他css选择器结合使用，实现更精准的循环样式。比如只给类名为active的列表项设置奇偶循环背景：
/* 只匹配类为active且位置为奇数的li元素 */
li.active:nth-child(odd) {
background-color: #f5f5f5;
}
li.active:nth-child(even) {
background-color: #ffffff;
}
也可以和伪元素结合，给循环位置的元素添加特定标记：
/* 每3个元素的第一个前面添加标记 */
.card-list .card:nth-child(3n+1)::before {
content: "第一组";
color: #1976d2;
margin-right: 8px;
}
使用注意事项
使用:nth-child实现循环样式时需要注意以下几点：
- :nth-child计数的是父元素下所有子元素，不管元素类型，比如父元素下有p和div两种子元素，
:nth-child(2)会匹配第二个子元素，不管它是p还是div。如果只想匹配特定类型的子元素，可以使用:nth-of-type选择器。 - 当父元素下有非目标元素时，可能会导致循环错位，比如列表前有标题元素，那么li的实际位置会往后偏移，需要调整表达式的参数。
- 如果循环周期较大，比如10周期循环，需要写10条对应的css规则，此时如果周期规律固定，也可以考虑用css变量结合js动态设置，不过纯静态场景下多条规则也是可接受的。
注意：如果页面中元素位置会动态变化，比如新增或删除子元素，:nth-child匹配的样式会自动跟随元素位置更新，不需要重新执行js逻辑，这也是该选择器相比js实现的一大优势。