在CSS样式开发中，经常需要对同一父元素下的特定类型元素设置差异化样式，nth-of-type选择器就是实现这个需求的核心工具。很多开发者容易把它和nth-child选择器混淆，导致样式设置不符合预期。
nth-of-type选择器基本语法
nth-of-type选择器的作用是匹配父元素下指定类型的第n个子元素，语法格式如下：
/* 基础语法 */
元素类型:nth-of-type(参数) {
样式属性: 属性值;
}
这里的元素类型可以是div、p、li等任意HTML元素标签，参数支持多种取值规则，常见的有以下几种：
- 数值：直接填写数字，比如2，匹配同类型元素中的第2个
- 关键字：even表示匹配偶数位置的同类型元素，odd表示匹配奇数位置的同类型元素
- 公式：格式为an+b，a和b是数值，n从0开始递增，比如2n+1匹配第1、3、5...个同类型元素
nth-of-type和nth-child的区别
很多开发者会混淆这两个选择器，核心差异在于匹配逻辑：
| 选择器 | 匹配逻辑 |
|---|---|
| nth-child | 先找父元素下第n个子元素，再判断该元素类型是否匹配 |
| nth-of-type | 先筛选父元素下指定类型的所有子元素，再找其中的第n个 |
举个例子，父元素下有两个子元素，第一个是<p>，第二个是<div>，用p:nth-child(2)无法匹配到任何元素，因为第2个子元素是div不是p；而div:nth-of-type(1)可以匹配到第二个子元素，因为它是父元素下第1个div类型元素。
实际使用示例
示例1：表格奇数行设置背景色
给表格的奇数行设置浅灰色背景，提升可读性：
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
</tr>
</table>
对应的CSS代码：
/* 匹配表格中奇数位置的tr元素 */
tr:nth-of-type(odd) {
background-color: #f5f5f5;
}
示例2：列表每3项设置不同样式
给无序列表每3项设置不同的文字颜色：
<ul class="item-list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ul>
对应的CSS代码：
/* 第1、4、7...个li元素 */
li:nth-of-type(3n+1) {
color: #ff0000;
}
/* 第2、5、8...个li元素 */
li:nth-of-type(3n+2) {
color: #00ff00;
}
/* 第3、6、9...个li元素 */
li:nth-of-type(3n) {
color: #0000ff;
}
注意事项
使用nth-of-type选择器时需要注意以下几点：
- 参数中的n是从0开始递增的，所以当参数为0时，不会匹配到任何元素，因为元素位置从1开始
- 如果父元素下没有指定类型的子元素，选择器不会生效，也不会报错
- 该选择器是CSS3新增特性，在IE8及以下版本浏览器中不支持，如果需要兼容旧浏览器，需要采用其他替代方案
掌握nth-of-type选择器的用法后，可以减少很多冗余的class定义，让CSS代码更简洁，维护起来也更方便。在实际开发中，多结合具体场景练习，就能快速熟练运用这个选择器。
CSSnth-of-type特定类型元素样式设置修改时间：2026-07-05 13:00:24