:nth-of-type伪类选择器按同类型兄弟元素位置选中元素，语法为:nth-of-type(n)，n可为even、odd、数字或an+b公式；常用于表格隔行着色、网格布局分组等场景；与:nth-child区别在于仅计算同类标签，如p:nth-of-type(1)选中首个p元素，而p:nth-child(2)可能因类型不符失败；使用时注意索引从1开始，a、b为整数，负结果不匹配，需确保同类型兄弟存在。
在CSS中，:nth-of-type 是一个非常实用的伪类选择器，它可以根据元素在其父容器中的位置（按同类型兄弟元素排序）来选择特定元素。这个选择器常用于对列表、表格行或重复结构进行样式控制，比如隔行变色、选中第几个子元素等。
基本语法与公式结构
:nth-of-type(n) 中的 n 可以是关键字（如 even、odd）、数字，或形如 an+b 的公式，其中：
- a 表示循环周期（步长）
- b 表示起始偏移量
- n 是从0开始的计数器
例如：
- p:nth-of-type(2)：选择第2个 <p> 元素
- tr:nth-of-type(even)：选择偶数行的 <tr>
- div:nth-of-type(3n+1)：选择第1、4、7、10…个 <div>
实际应用场景
这个选择器特别适合处理结构化的HTML内容，以下是一些常见用法：
立即学习“前端免费学习笔记（深入）”；
-
表格隔行着色：
tr:nth-of-type(odd) { background: #f0f0f0; }
让奇数行背景变灰，提升可读性。 -
网格布局中每三列一组：
li:nth-of-type(3n+1) { clear: left; }
在浮动布局中，让每组第一项清除左侧浮动。 -
跳过前几项设置样式：
p:nth-of-type(n+4) 会从第4个段落开始选中所有 <p> 元素，可用于“前面几段正常，后面加引用样式”的场景。
与其他选择器的区别
:nth-of-type 是基于元素类型的，只计算相同标签名的兄弟元素。这和 :nth-child 不同，后者不区分类型，只看位置。
举例说明：
<div> <p>段落1</p> <h2>标题</h2> <p>段落2</p> </div>
- p:nth-of-type(1) 选中第一个 <p>（即“段落1”）
- p:nth-of-type(2) 选中第二个 <p>（即“段落2”）
- p:nth-child(1) 成功，因为第一个孩子是 <p>
- p:nth-child(2) 失败，因为第二个孩子是 <h2>
小技巧与注意事项
使用时注意以下几点，避免常见误区：
- 索引从1开始，不是0
- 公式中 a 和 b 必须是整数，如 2n+1、-n+5
- 负数结果不会匹配任何元素（如 3n-10 在 n 较小时无效）
- 确保目标元素确实存在对应类型的兄弟节点
基本上就这些。掌握 :nth-of-type 能让你更灵活地控制页面结构样式，无需额外类名就能实现动态选择。
