:nth-of-type 属于 CSS 的结构化伪类，它的核心作用是按照元素在父容器中同类型兄弟节点里的位置来匹配目标。与直接指定 class 或 id 不同，这类选择器不依赖额外的 HTML 标记，而是利用 DOM 树本身的结构关系完成样式指派。正因如此，它在动态列表、CMS 生成内容、评论列表等无法逐项手动添加类名的场景里非常实用。不过，很多开发者第一次接触时容易把它和 :nth-child 混淆，导致选择器在混合标签结构中不生效。本文会从计数逻辑、与 :nth-child 的差异、常见布局实战和进阶用法几个方面展开。

一、:nth-of-type 的语法结构与匹配规则

该伪类最常用的写法是 元素:nth-of-type(n)，其中冒号前面是目标元素的类型选择器，冒号后面是位置参数。位置参数可以是整数、关键字 odd、even，或者形如 an+b 的表达式。在表达式中，a 和 b 为整数，n 会从 0 开始依次取值，计算结果就对应位置编号。需要注意的是，位置编号从 1 开始，而不是从 0 开始。例如 li:nth-of-type(2) 会选中父容器中的第二个 <li> 元素，而不是第一个。

关键字 odd 和 even 是公式的简写，odd 等价于 2n+1，even 等价于 2n。因此，如果希望给列表的奇数行和偶数行设置不同背景，直接使用这两个关键字最直观。公式形式则更具灵活性：-n+3 可以选中前三个同类型元素，因为 n 取 0、1、2 时分别得到 3、2、1，而 n 继续增大时结果变为负数，不再命中有效位置。类似地，2n+3 表示从第 3 个位置开始，每隔 2 个位置命中一次。

/* 选择父容器中第 2 个 li */
li:nth-of-type(2) {
  color: #e63946;
}
/* 选择所有奇数位置的 li */
li:nth-of-type(odd) {
  background-color: #f1faee;
}
/* 选择前 3 个 li */
li:nth-of-type(-n + 3) {
  font-weight: bold;
}
/* 选择从第 3 个开始的每隔 2 个 li */
li:nth-of-type(2n + 3) {
  border-left: 3px solid #457b9d;
}

如果省略前面的元素选择器，只写 :nth-of-type(2)，规则会匹配父容器里每一种类型的第二个元素。也就是说，如果一个容器中既有多个段落又有多个标题，那么这个规则会把第二个段落和第二个标题都选中。实际开发中建议明确写出元素类型，避免匹配范围超出预期。同时，计数范围只限于直接父元素下的同类型兄弟节点，不会跨级搜索，这一点在复杂嵌套结构中需要格外留意。

二、与 :nth-child 的关键差异

要真正理解 :nth-of-type，必须把它和 :nth-child 放在一起对比。:nth-child 的计数对象是父容器的所有子元素，不论标签是否相同；:nth-of-type 的计数对象则限定为与选择器指定类型相同的兄弟元素。因此，在父容器中混入不同类型的节点时，两者会出现明显差异。假设一个 <section> 内依次包含标题、文章、段落、文章，那么第二个 <article> 在所有子元素中可能排在第四位，但它在 <article> 类型中排在第二位。

下面的结构展示了这种典型情况：

<section class="news">
  <h2>今日要闻</h2>
  <article>第一条新闻</article>
  <p>这是分隔说明</p>
  <article>第二条新闻</article>
  <article>第三条新闻</article>
</section>

如果使用 .news article:nth-of-type(2)，会命中第二个 <article>，也就是文本内容为第二条新闻的元素。而 .news article:nth-child(2) 不会命中任何 <article>，因为 <section> 的第二个子元素是 <h2>，它的标签类型不匹配 article。这正是开发中常见的误区：以为 nth-child 也是按类型计数，结果选择器静默失效。遇到混合结构时，先判断元素在父级子节点中的实际序号，再决定使用哪一个伪类。

/* 命中第二个 article */
.news article:nth-of-type(2) {
  background-color: #e9c46a;
}
/* 不会命中任何 article */
.news article:nth-child(2) {
  background-color: #e76f51;
}

需要额外强调的是，这两个伪类都只针对元素的直接父容器。如果 <article> 还被包裹在更深的 <div> 里，那么外层选择器中的 nth-of-type 不会跨过这个 <div> 去统计内部元素。换句话说，位置计算始终发生在直接兄弟节点之间，层级关系不能省略。

三、典型布局场景与写法

数据列表和表格是 :nth-of-type 最常用的场景之一。比如一个新闻列表或评论列表通常由结构相同的 <li> 组成，使用 li:nth-of-type(odd) 和 li:nth-of-type(even) 可以快速实现斑马纹效果，而无需在每个列表项上额外添加 class。表格中的 <tr> 也类似，直接写 tr:nth-of-type(even) 就能让偶数行背景变化。这种写法在服务端渲染或内容动态插入时优势明显，因为新增行会自动按规则重新计算，不需要手动维护类名。

卡片网格布局中经常需要控制每行最后一个元素的右边距，避免出现多余空隙。假设每行显示 3 张卡片，可以通过 .card:nth-of-type(3n) 清除第三、第六、第九张卡片的右边距。不过要注意，父容器里如果还混入了其他同类型元素，计数就会受到干扰。因此在这种场景下，最好保证 <article> 或 <div> 是父容器的唯一直接子元素类型，或者使用更明确的选择器限定范围。

响应式布局中还可以根据屏幕宽度调整计数周期。例如移动端一行显示 2 个卡片，桌面端一行显示 4 个卡片，媒体查询可以配合 nth-of-type 分别定义不同断点下的间隔规则。这样既保持了 HTML 结构简单，又能让样式在不同设备上自动适配。

/* 移动端：每行 2 个，清除第 2、4、6 个的右边距 */
.card:nth-of-type(2n) {
  margin-right: 0;
}
/* 桌面端：每行 4 个，恢复之前的边距并清除第 4、8、12 个的右边距 */
@media (min-width: 960px) {
  .card:nth-of-type(2n) {
    margin-right: 16px;
  }
  .card:nth-of-type(4n) {
    margin-right: 0;
  }
}

此外，导航菜单中也常借助 :nth-of-type 为不同位置的菜单项设置特殊样式。例如给第三项添加高亮、给最后一项设置不同颜色。前提是菜单项在 DOM 结构中确实属于同层级同类型，否则建议结合其他结构选择器一起使用。

四、进阶用法与动态内容注意事项

:nth-of-type 的表达式可以涵盖很多复杂取数需求，比如使用 -n+3 选中前 3 个元素，使用 n+4 选中从第 4 个开始的所有元素。如果需要从列表末尾倒序计数，可以使用 :nth-last-of-type，它的语法与 :nth-of-type 完全一致，只是计数方向相反。例如 :nth-last-of-type(-n+3) 会选中最后 3 个同类型元素，这在突出最新评论或最新文章时很实用。

类选择器与 :nth-of-type 结合时有一个容易忽视的细节：类的过滤不会改变类型计数基础。比如 .card.special:nth-of-type(2) 仍然按照父容器中所有 <div class="card"> 元素的顺序计数，而不是在所有带 special 类的卡片中计数。如果父容器里有 5 个 card，其中第 1 个和第 3 个有 special 类，那么 .card.special:nth-of-type(2) 会先找到第 2 个 card，再检查它是否有 special 类，而不是找到第 2 个 special 卡片。这一点与 :nth-child 加类选择器的行为类似，需要根据实际需求小心使用。

动态插入或删除节点时，:nth-of-type 的样式会自动重新计算，这既是优点也可能带来视觉上的跳动。例如在无限滚动列表中，前置插入新内容会使原有元素的序号整体后移，导致斑马纹颜色发生翻转或高亮位置改变。如果交互上需要固定某几个元素的样式，更可靠的做法是结合 JavaScript 维护稳定的状态类，或者使用属性选择器配合数据属性标记元素。对于纯 CSS 方案，则可以在动态内容可能出现的方向上预留计数规则。

从兼容性来看，当前主流浏览器均完整支持 :nth-of-type，可以在生产环境放心使用。性能上，结构化伪类由浏览器引擎在样式匹配阶段直接计算，相对于脚本遍历 DOM 再切换类名的方式开销更低。不过在大型页面中，过多过深的选择器仍然可能增加样式计算时间，建议保持选择器层级清晰，并在必要时缩小匹配范围。