:nth-of-type按同类型兄弟元素索引选中目标，如p:nth-of-type(2)选第二个<p>，忽略其他标签；与:nth-child不同，它不依赖整体顺序，适用于列表项、段落等精准样式控制。
要精准使用 CSS :nth-of-type 选择器选中特定类型的元素，比如列表项或段落，关键在于理解其基于“同类型兄弟元素”的索引机制。它不会按所有兄弟元素排序，而是只在相同标签类型的元素中计算位置。
:nth-of-type 是如何工作的？
:nth-of-type(n) 会选中其父元素下第 n 个指定类型的子元素。例如：
-
p:nth-of-type(2)选中父容器中第二个<p>段落元素 -
li:nth-of-type(odd)选中所有奇数位置的<li>列表项 - 即使中间夹杂其他标签（如 div、h2），只要它们不是同类型，就不会影响计数
举例说明：
<div> <h2>标题</h2> <p>第一段</p> <span>辅助信息</span> <p>第二段</p> <!-- 这是 p:nth-of-type(2) --> <p>第三段</p> </div>
此时 p:nth-of-type(2) 实际选中的是“第二段”，因为它是第二个 <p> 元素，忽略中间的 <span>。
立即学习“前端免费学习笔记（深入）”；
应用于无序/有序列表：精准控制列表项样式
在 <ul> 或 <ol> 中，多个 <li> 是同类型元素，非常适合用 :nth-of-type 控制视觉节奏。
-
li:nth-of-type(3)—— 选中第三个列表项 -
li:nth-of-type(even)—— 选中偶数项，常用于斑马条纹 -
li:nth-of-type(n+4)—— 从第4个开始的所有项 -
li:nth-of-type(-n+3)—— 前三项
实用场景：为每三行一组添加背景色
li:nth-of-type(3n+1) {
background-color: #f0f8ff;
}
与 :nth-child 的区别：避免常见误区
很多人混淆 :nth-of-type 和 :nth-child。区别如下：
-
p:nth-of-type(1)：第一个<p>元素，不管前面有没有其他标签 -
p:nth-child(1)：必须是父元素的第一个子元素，且是<p>
如果第一个子元素是 <h2>，那么 p:nth-child(1) 将无法匹配任何元素，而 p:nth-of-type(1) 仍可正常工作。
高级用法：结合公式实现复杂选择
使用 an+b 公式可以更灵活地选中元素组：
-
p:nth-of-type(4n+1)—— 每隔3个段落的第一个（第1、5、9…） -
li:nth-of-type(5)—— 精确选中第五个列表项 -
div:nth-of-type(2n)—— 父元素下的偶数个 div 子元素
还可配合伪类使用，如：
li:nth-of-type(odd):not(:last-of-type) {
margin-bottom: 12px;
}
表示：选中所有奇数项列表，但排除最后一项。
基本上就这些。掌握 :nth-of-type 的核心是理解“同类元素中的位置”。只要明确目标元素的标签类型和相对顺序，就能写出精准的选择器，特别适合处理结构不规则但语义清晰的内容区块。
