CSS的:nth-of-type()选择器属于结构性伪类选择器，它的核心逻辑是先对页面中同类型的元素进行分组，再在每组同类型元素中按照指定的位置规则匹配目标元素，不会受到其他不同类型元素的位置干扰。
:nth-of-type()的基本匹配规则
使用:nth-of-type()选择器时，浏览器会先执行两步操作：第一步是筛选出所有指定类型的元素，忽略其他类型的元素；第二步是在筛选出的同类型元素集合中，按照括号里的规则匹配对应位置的元素。
比如页面中有如下结构：
<div class="container">
<p>第一个段落</p>
<span>第一个span</span>
<p>第二个段落</p>
<span>第二个span</span>
<p>第三个段落</p>
</div>
如果使用p:nth-of-type(2)选择器，会先筛选出所有<p>元素，得到3个<p>元素的集合，然后匹配集合中第2个位置的<p>，也就是内容为第二个段落的元素，不会受到中间<span>元素的影响。
常见参数用法
:nth-of-type()括号里的参数支持多种写法，满足不同的匹配需求：
- 具体数字：直接匹配同类型元素中对应位置的元素，比如
:nth-of-type(1)匹配第一个同类型元素。 - 关键字：支持
odd和even，odd匹配同类型元素中位置为奇数的元素，even匹配位置为偶数的元素。 - 公式：格式为
an+b，其中a和b是数字，n从0开始递增，计算结果为元素的位置，比如2n+1和odd效果一致，2n和even效果一致。
代码示例
下面是一个完整的CSS和HTML示例，展示不同参数的匹配效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>nth-of-type示例</title>
<style>
/* 匹配第一个p元素 */
p:nth-of-type(1) {
color: red;
}
/* 匹配偶数位置的p元素 */
p:nth-of-type(even) {
background-color: #f0f0f0;
}
/* 匹配2n+1位置的span元素 */
span:nth-of-type(2n+1) {
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<p>段落1</p>
<span>span1</span>
<p>段落2</p>
<span>span2</span>
<p>段落3</p>
<span>span3</span>
</div>
</body>
</html>
运行上述代码后，段落1会显示为红色，段落2会有浅灰色背景，span1和span3会加粗显示，完全符合按类型匹配的规则。
和:nth-child()的区别
很多开发者容易混淆:nth-of-type()和:nth-child()，两者的核心差异在于匹配的前置筛选逻辑：
| 选择器 | 匹配逻辑 |
|---|---|
| :nth-child() | 先匹配所有子元素的位置，再判断该位置的元素类型是否符合前面的标签要求 |
| :nth-of-type() | 先筛选同类型的子元素，再在同类型集合中匹配位置 |
比如还是之前的HTML结构，p:nth-child(2)会先找父元素的第二个子元素，发现是<span>，所以不会匹配任何<p>元素，而p:nth-of-type(2)会正常匹配第二个<p>元素。
使用注意事项
- 如果前面不指定元素类型，直接使用
:nth-of-type()，会匹配所有类型中符合位置规则的元素，但是这种用法很少见，一般都会指定具体元素类型。 - 位置计数是从1开始的，不是从0开始，这一点和很多编程语言的数组索引不同，使用时需要注意。
- 该选择器只匹配当前父元素下的子元素，不会跨父元素匹配，嵌套结构下只会在各自的父元素内独立计算。
CSSnth-of-type元素匹配伪类选择器修改时间：2026-07-08 12:30:15