css :nth child 选择器怎么用_列表样式控制示例

• :nth-child(1) → 选中第一个子元素（且必须是目标标签，如 li）
• :nth-child(odd) 或 :nth-child(2n+1) → 所有奇数位子元素
• :nth-child(even) 或 :nth-child(2n) → 所有偶数位子元素
• :nth-child(3n) → 第 3、6、9… 个子元素（3 的倍数位）
• :nth-child(3n+2) → 第 2、5、8… 个子元素（从第 2 个开始，每 3 个一循环）

:nth-child() 和 :nth-of-type() 的关键区别在哪

这是最容易混淆的一点：:nth-child() 数的是「所有子元素」的顺序；:nth-of-type() 数的是「同类型标签」的顺序。

比如父元素是：

立即学习“前端免费学习笔记（深入）”；

   
说明文字
   
苹果
   
香蕉
   分隔线   
橙子
 

那么：

• li:nth-child(2) ✅ 匹配「香蕉」（因为
• 正好在第 2 个位置）
• li:nth-child(3) ❌ 不匹配「香蕉」，也不匹配「橙子」——第 3 个子元素是
• （香蕉），但第 3 个子元素确实是
• ，所以这里其实 ✅；真正失效的是 li:nth-child(4)（第 4 个是 ）
• li:nth-of-type(2) → 匹配「香蕉」（它是第 2 个
• ）
• li:nth-of-type(3) → 匹配「橙子」（它是第 3 个
• ），不管前面插了多少非 li 元素

实用列表样式控制示例：斑马纹 + 首尾特殊处理

真实项目中经常要实现「奇偶行不同背景」「第一项加图标」「最后一项去边框」这类效果。用 :nth-child() 写起来很直接，但要注意兼容性和语义。

下面这段 css 会作用于一个干净的

结构（无其他子元素干扰）：

ul li {   padding: 8px 12px;   border-bottom: 1px solid #eee; } 
/ 奇数项浅灰背景 / ul li:nth-child(odd) { background-color: #f9f9f9; }
/ 偶数项白色背景（可省略，除非要覆盖） / ul li:nth-child(even) { background-color: #fff; }
/ 第一项加左侧蓝条 / ul li:nth-child(1) { border-left: 4px solid #007bff; }
/ 最后一项去掉下边框 / ul li:last-child { border-bottom: none; }

注意：:last-child 比 :nth-child(n) 更安全，只要最后一个子元素确实是