`nth-child()`的 基础用法

nth-child() 是 CSS 中最强大、最实用的伪类选择器之一 ，它允许你根据元素在其父元素中的位置（序号）来选择元素 。

简单说就是："我想选第几个、或者每隔几个元素"。

下面我通过概念 → 语法 → 8 个经典示例 → Vue 3 实战，给你完整讲清楚。

---

一、基础概念（一句话）

nth-child() 用来 选中父元素下的"第 n 个子元素"

例如：

• 第 1 个
• 第 2 个
• 所有奇数个
• 第 3 个及之后每隔 3 个

---

二、语法格式

/* 选中第 n 个子元素 */
元素:nth-child(n) {
  /* 样式 */
}

n 可以是：

1. 数字：3 → 第 3 个
2. 关键字：odd、even
3. 公式：2n、3n+1 等

---

三、8 个核心示例（从简单到进阶）

✅ 示例 1：选中第 3 个元素

li:nth-child(3) {
  color: red;
}

📊 效果：

1. 正常
2. 正常
3. ✅ 红色
4. 正常

---

✅ 示例 2：选中所有奇数位元素

li:nth-child(odd) {
  background: #f5f5f5;
}

📊 效果：

1. ✅ 灰色
2. 正常
3. ✅ 灰色
4. 正常

---

✅ 示例 3：选中所有偶数位元素

li:nth-child(even) {
  background: #f5f5f5;
}

---

✅ 示例 4：选中"第 3 个及之后每隔 3 个"

li:nth-child(3n) {
  color: blue;
}

📊 效果：

1. 正常
2. 正常
3. ✅ 蓝色
4. 正常
5. 正常
6. ✅ 蓝色

👉 3n = 3, 6, 9, 12, ...

---

✅ 示例 5：选中"从第 1 个开始，每隔 2 个"

li:nth-child(2n+1) {
  font-weight: bold;
}

📊 效果：

1. ✅ 粗体
2. 正常
3. ✅ 粗体
4. 正常

👉 等价于 odd

---

✅ 示例 6：选中"前 4 个"

li:nth-child(-n+4) {
  color: green;
}

📊 效果：

1. ✅ 绿色
2. ✅ 绿色
3. ✅ 绿色
4. ✅ 绿色
5. 正常

---

✅ 示例 7：选中"第 3 个及之后"

li:nth-child(n+3) {
  border-top: 1px solid #ccc;
}

📊 效果：

1. 正常
2. 正常
3. ✅ 有上边框
4. ✅ 有上边框

---

✅ 示例 8：选中"第 2、5、8、11 个..."

li:nth-child(3n+2) {
  background: yellow;
}

📊 效果：

1. 正常
2. ✅ 黄色
3. 正常
4. 正常
5. ✅ 黄色

👉 3n+2 = 2, 5, 8, 11, 14, ...

---

四、nth-child 的工作机制（非常重要）

nth-child() 的计算顺序：

1. 找到所有兄弟元素
2. 从 1 开始编号
3. 应用公式计算
4. 匹配元素

✅ 注意 ：编号时不考虑元素类型，只看位置。

---

五、Vue 3 实战示例

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script setup>
const items = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango']
</script>

<style scoped>
/* 隔行变色 */
li:nth-child(odd) {
  background: #f8f9fa;
}

li:nth-child(even) {
  background: #e9ecef;
}

/* 第一个特殊 */
li:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* 最后一个特殊 */
li:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
</style>

---

六、企业级常见用法

✅ 表格隔行变色

tr:nth-child(odd) {
  background: #fafafa;
}

✅ 卡片列表"3 列网格"最后一列特殊

/* 选中每行的第 3 个 */
.card:nth-child(3n) {
  border-right: none;
}

✅ 导航菜单激活样式

.nav-item:nth-child(2) {
  border-bottom: 2px solid #1890ff;
}

---

七、对比相关选择器

选择器	作用	示例
nth-child(n)	第 n 个所有类型的子元素	li:nth-child(3)
nth-of-type(n)	第 n 个特定类型的子元素	li:nth-of-type(3)
first-child	第一个	等价于 :nth-child(1)
last-child	最后一个	无 nth-child 对应

---

八、常见坑点（避免犯错）

❌ 坑 1：混合元素类型

<div>
  <p>段落1</p>
  <span>span1</span>
  <p>段落2</p>
</div>

/* 会选中 span1 */
p:nth-child(2) { ... }

✅ 建议用 nth-of-type

---

❌ 坑 2：从 0 开始

/* 错！n 从 1 开始 */
:nth-child(0) { ... }

✅ 正确：:nth-child(1)

---

九、公式快速记忆表

公式	选择元素
n	所有
2n 或 even	偶数
2n+1 或 odd	奇数
3n	3, 6, 9, 12, ...
-n+5	前 5 个
n+4	第 4 个及之后

---

十、一句话总结

✅ nth-child = 按位置选元素

✅ 常用：odd/even、3n、n+4

✅ Vue 3 中常用于列表/表格样式控制

---

如果你愿意，我可以下一步帮你：

• ✅ 写一个 商品列表 3 列网格布局
• ✅ 实现 表格的斑马纹 + 最后一列特殊样式
• ✅ 对比 nth-child 和 nth-of-type 差异

你现在是表格/列表/卡片哪种场景？