如何使用nth-child选择列表中的第3、5、7项？

针对你给出的HTML结构，有两种常用方法可以选中第3、5、7个<li>元素：

方法一：直接指定目标序号 #

这是最直观的方式，用逗号分隔多个nth-child选择器，精准定位每个目标项：

ul li:nth-child(3),
ul li:nth-child(5),
ul li:nth-child(7) {
  /* 自定义样式示例 */
  color: #e74c3c;
  background-color: #fef5f4;
}

方法二：利用公式匹配规律项 #

观察目标项：3、5、7都是从第3个开始的奇数项，可以通过两个伪类组合实现批量匹配：

• nth-child(2n+1) 匹配所有奇数位置的li（第1、3、5、7...个）
• nth-child(n+3) 匹配从第3个开始的所有li

叠加后就能精准筛选出第3、5、7个（后续如果新增奇数位的li，比如第9、11个也会被选中）：

ul li:nth-child(2n+1):nth-child(n+3) {
  /* 自定义样式示例 */
  border-left: 3px solid #2ecc71;
  padding-left: 8px;
}

内容的提问来源于stack exchange，提问作者Abayomi Babatunde