在HTML & CSS中，nth-child、nth-of-type详解

文章目录

`nth-child`详解
- [1. 基本语法](#1. 基本语法)
- [2. 参数详解与示例](#2. 参数详解与示例)
- - [2.1 数字](#2.1 数字)
  - [2.2 关键字](#2.2 关键字)
  - [2.3 公式 `an+b`](#2.3 公式 an+b)
- [3. 实际应用场景](#3. 实际应用场景)
- - [3.1 表格隔行变色](#3.1 表格隔行变色)
  - [3.2 列表前几个特殊标记](#3.2 列表前几个特殊标记)
  - [3.3 移除最后一个元素的边框](#3.3 移除最后一个元素的边框)
- [4. 与 `:nth-of-type` 的区别](#4. 与 :nth-of-type 的区别)
- [5. 注意事项](#5. 注意事项)
- [6. 总结](#6. 总结)
`nth-of-type`详解
- - [1. 基础概念](#1. 基础概念)
  - [2. 语法](#2. 语法)
  - [3. 常见用法示例](#3. 常见用法示例)
  - - [① 选中特定序号](#① 选中特定序号)
    - [② 隔行变色](#② 隔行变色)
    - [③ 从第几个开始选](#③ 从第几个开始选)
    - [④ 选中前3个](#④ 选中前3个)
    - [⑤ 每隔3个选一个（如第1,4,7...）](#⑤ 每隔3个选一个（如第1,4,7...）)
  - [4. 与 `:nth-child` 的区别](#4. 与 :nth-child 的区别)
  - [5. 注意事项](#5. 注意事项)
  - [6. 完整示例代码](#6. 完整示例代码)
使用示例及解析
- 正确用例
- 错误用例

`nth-child`详解

:nth-child() 是 CSS 中非常实用的一个伪类，它允许你根据元素在其父元素中的位置（第几个子元素）来精准地选择元素。下面我将从基础语法开始，逐步深入，并通过大量示例帮你掌握它的用法。

1. 基本语法

css 复制代码

父元素 子元素:nth-child(参数) {
  属性: 值;
}

父元素：你想查找的子元素所属的父容器（可选，但通常用来限定范围）。
子元素 ：要匹配的元素类型（如 li、div、p 等）。
参数：指定选择第几个或哪些位置的子元素，可以是数字、关键字 或公式。

重要：索引是从 1 开始的，不是从 0！

2. 参数详解与示例

2.1 数字

直接写一个整数，表示选择第 n 个子元素。

css 复制代码

/* 选择父元素下的第 3 个 <li> */
li:nth-child(3) {
  background: yellow;
}

html 复制代码

<ul>
  <li>项目 1</li>   <!-- 第1个 -->
  <li>项目 2</li>   <!-- 第2个 -->
  <li>项目 3</li>   <!-- 被选中，背景变黄 -->
  <li>项目 4</li>
</ul>

2.2 关键字

odd ：奇数位置（等同于 2n+1）
even ：偶数位置（等同于 2n）

css 复制代码

/* 所有奇数行背景灰色，偶数行背景白色（常用于表格隔行变色） */
tr:nth-child(odd) {
  background: #f2f2f2;
}
tr:nth-child(even) {
  background: white;
}

2.3 公式 `an+b`

公式形式为 a n + b，其中：

a 是步长（系数）
b 是偏移量
n 从 0 开始计数，但最终选中的元素索引是计算结果（≥1 的整数）。

常见公式示例：

公式	含义	选中索引
`:nth-child(2n)`	偶数项	2, 4, 6, ...
`:nth-child(2n+1)`	奇数项	1, 3, 5, ...
`:nth-child(3n)`	第3、6、9...项	3, 6, 9, ...
`:nth-child(3n+2)`	从第2项开始每3项一个	2, 5, 8, ...
`:nth-child(-n+3)`	前3项	1, 2, 3
`:nth-child(n+4)`	从第4项开始到最后	4, 5, 6, ...
`:nth-child(4n+1)`	第1、5、9...项（每4项第一个）	1, 5, 9, ...

示例：选择前 3 个元素

css 复制代码

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

html 复制代码

<ul>
  <li>项目 1</li>   <!-- 加粗 -->
  <li>项目 2</li>   <!-- 加粗 -->
  <li>项目 3</li>   <!-- 加粗 -->
  <li>项目 4</li>
</ul>

示例：选择第 4 到第 6 个元素（组合两个伪类）

css 复制代码

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

选中索引 4, 5, 6。

3. 实际应用场景

3.1 表格隔行变色

css 复制代码

table tr:nth-child(even) {
  background-color: #e0e0e0;
}

3.2 列表前几个特殊标记

css 复制代码

/* 前三个列表项使用不同的图标 */
li:nth-child(-n+3) {
  list-style-type: square;
}

3.3 移除最后一个元素的边框

css 复制代码

/* 除最后一个子元素外，都加下边框 */
li:not(:nth-last-child(1)) {
  border-bottom: 1px solid #ccc;
}

:nth-last-child() 是从后往前计数，用法与 :nth-child 完全一致。

4. 与 `:nth-of-type` 的区别

这是一个常见的混淆点。

:nth-child：不考虑元素类型，只计算父元素下所有子元素的位置。
:nth-of-type ：只计算同类型兄弟元素的位置。

看个例子就明白了：

html 复制代码

<div class="container">
  <p>第一段</p>
  <span>一个 span</span>
  <p>第二段</p>
  <p>第三段</p>
</div>

css 复制代码

/* 使用 :nth-child(2) */
.container p:nth-child(2) {
  color: red;
}

父元素下的第二个子元素是 ，不是 ，所以没有  被选中。

css 复制代码

/* 使用 :nth-of-type(2) */
.container p:nth-of-type(2) {
  color: red;
}

p 类型的第二个元素是"第二段"（索引：第一个 p 是"第一段"，第二个 p 是"第二段"），所以"第二段"变红。

总结：当你需要基于元素类型来计数时，用 :nth-of-type；当你需要基于所有子元素统一计数时，用 :nth-child。

5. 注意事项

索引从 1 开始，不是 0。
公式中的 n 从 0 开始 ，但计算结果为 0 或负数会被忽略，只保留 ≥1 的整数。例如 :nth-child(2n-1) 实际效果和 :nth-child(odd) 一样。
子元素类型可以混合 ，:nth-child 会计算所有子节点（包括文本节点？不会，只计算元素节点）。实际中只影响元素。
浏览器兼容性很好，从 IE9 开始都支持（包括 IE9），可以放心使用。

6. 总结

:nth-child() 让你能根据元素在父级中的位置进行选择。
参数可以是数字、odd/even 或 an+b 公式。
可以用它实现隔行变色、选择前 N 个、选择特定区间等效果。
注意与 :nth-of-type 的区别：一个看所有子元素，一个只看同类型元素。

:nth-child 是一个非常强大且灵活的工具。

`nth-of-type`详解

CSS 中的 :nth-of-type() 是一个非常实用的伪类选择器，它允许你根据元素在其父元素中相同类型（标签名）的兄弟元素中的位置来选中特定的元素。下面我将从基础概念、语法、常用场景以及和 :nth-child 的区别等方面来讲解。

1. 基础概念

:nth-of-type() 会先找出父元素下所有 相同标签名 的子元素，然后根据你指定的序号或公式来匹配其中的某一个或某几个。

比如，你有一个 <div> 里面混合了 、 等标签：

html 复制代码

<div>
  <p>第一段</p>
  <span>span1</span>
  <p>第二段</p>
  <span>span2</span>
  <p>第三段</p>
</div>

如果使用 p:nth-of-type(2)，它会先选出所有 （共3个），然后选中其中第2个（即"第二段"）。注意：它只关心同类型的元素，中间的  不会被计入  的序号。

2. 语法

:nth-of-type(an + b)

括号里可以填以下几种形式：

数字：直接指定第几个。例如 li:nth-of-type(3) 选中第三个 <li>。
关键词 ：
- odd：选中奇数位置的元素（第1,3,5...个）
- even：选中偶数位置的元素（第2,4,6...个）
公式：形如 an + b，其中 a 和 b 是整数，n 从 0 开始计数。例如：
- 2n 等价于 even
- 2n+1 等价于 odd
- n+3：选中第3个及之后的所有（n=0 → 3, n=1 → 4, ...）
- -n+3：选中前3个（n=0 → 3, n=1 → 2, n=2 → 1, n=3 → 0 无匹配）

3. 常见用法示例

① 选中特定序号

css 复制代码

/* 选中父元素中的第2个 <li> */
li:nth-of-type(2) {
  color: red;
}

② 隔行变色

css 复制代码

/* 表格奇偶行不同背景 */
tr:nth-of-type(odd) {
  background: #f2f2f2;
}
tr:nth-of-type(even) {
  background: #ffffff;
}

③ 从第几个开始选

css 复制代码

/* 选中第4个及之后的所有 <div> */
div:nth-of-type(n+4) {
  border: 1px solid blue;
}

④ 选中前3个

css 复制代码

/* 前3个 <h2> 加粗 */
h2:nth-of-type(-n+3) {
  font-weight: bold;
}

⑤ 每隔3个选一个（如第1,4,7...）

css 复制代码

/* 公式 3n+1 */
p:nth-of-type(3n+1) {
  background: yellow;
}

4. 与 `:nth-child` 的区别

这两个很容易混淆，关键区别在于：

:nth-child ：在父元素下 所有子元素（不论标签）中按顺序匹配，必须同时满足标签名和位置。
:nth-of-type：先按标签名分组，然后在同组内按顺序匹配。

举例说明：

html 复制代码

<div>
  <h2>标题</h2>
  <p>第一段</p>
  <p>第二段</p>
</div>

p:nth-child(2)：父元素的所有子元素中，第二个子元素是  吗？这里第二个子元素正是 ，所以匹配"第一段"。
p:nth-of-type(2)：父元素下所有  中，第二个  是"第二段"。

再看一个复杂点的：

html 复制代码

<div>
  <p>1</p>
  <span>a</span>
  <p>2</p>
  <span>b</span>
  <p>3</p>
</div>

p:nth-child(3)：第三个子元素是  吗？第三个是 2，所以匹配。
p:nth-of-type(3)：所有  中的第三个，即"3"，匹配。

总结：

当你需要忽略其他标签，只针对同类型元素计数时，用 :nth-of-type。
当你需要精确匹配"父元素的第X个子元素且类型为Y"时，用 :nth-child。

5. 注意事项

:nth-of-type 对大小写敏感吗？HTML 标签不区分大小写，所以 p:nth-of-type 和 P:nth-of-type 效果一样，但通常建议用小写。
如果父元素下没有足够的同类型元素，选择器不会生效。
公式中的 n 从 0 开始，但实际元素的索引从 1 开始（即第一个元素对应公式中的 b 值）。

6. 完整示例代码

你可以复制下面代码到本地试试：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    section {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 10px;
    }
    p:nth-of-type(odd) {
      background: lightblue;
    }
    p:nth-of-type(3) {
      font-weight: bold;
      text-decoration: underline;
    }
    span:nth-of-type(2n) {
      color: red;
    }
  </style>
</head>
<body>
  <section>
    <p>p 1</p>
    <span>span 1</span>
    <p>p 2</p>
    <span>span 2</span>
    <p>p 3</p>
    <span>span 3</span>
    <p>p 4</p>
  </section>
</body>
</html>

效果：

奇数 （1和3）背景变浅蓝。
第三个 （即 p 3）加粗并加下划线。
偶数位置的 （span 2）文字变红。

使用示例及解析

示例，需要获取"详情"的

html 复制代码

<div class="section_nav">
    <div class="title">您的位置：</div>
    <span class="item">首页</span>
    <span class="item">详情</span>
</div>

正确用例

css 复制代码

/* 于span所在层，获取所有span标签的对象，取第3个对象 */
.section_nav span:nth-of-type(2){}

css 复制代码

/* 于span所在层，获取所有对象，取第3个且标签为span的对象 */
.section_nav span:nth-child(3){}

错误用例

css 复制代码

/* 获取不到对象 */
.section_nav .item:nth-child(1){}

原因： nth-child() 选择器计算所有子元素，包括<div class="title">

.section_nav的第一个子元素是<div class="title"> （第1个元素是div）
第二个子元素才是首页（第2个元素是span）
所以.item:nth-child(1)会寻找第一个子元素且class为item的元素，但第一个子元素的class是"title"，不是"item"

这种选择器用法，只能匹配第一个子元素并且该子元素含有.item类，否则就匹配不到对象。

在HTML & CSS中，nth-child、nth-of-type详解

文章目录

nth-child详解

1. 基本语法

2. 参数详解与示例

2.1 数字

2.2 关键字

2.3 公式 an+b

3. 实际应用场景

3.1 表格隔行变色

3.2 列表前几个特殊标记

3.3 移除最后一个元素的边框

4. 与 :nth-of-type 的区别

5. 注意事项

6. 总结

nth-of-type详解

1. 基础概念

2. 语法

3. 常见用法示例

① 选中特定序号

② 隔行变色

③ 从第几个开始选

④ 选中前3个

⑤ 每隔3个选一个（如第1,4,7...）

4. 与 :nth-child 的区别

5. 注意事项

6. 完整示例代码

使用示例及解析

正确用例

错误用例

`nth-child`详解

2.3 公式 `an+b`

4. 与 `:nth-of-type` 的区别

`nth-of-type`详解

4. 与 `:nth-child` 的区别