在前端页面的样式开发中，我们经常需要对特定位置的同类型元素设置差异化样式，CSS3提供的nth-of-type和nth-child伪类选择器就是解决这类需求的核心工具，两者的匹配逻辑存在明显差异，使用时需要准确区分。
nth-child选择器的基本用法
nth-child选择器的匹配逻辑是：先找到当前元素的父元素，然后匹配父元素下所有子元素（不区分类型）中的第n个，再判断这个第n个元素是否符合前面指定的元素类型，符合则生效。
它的参数支持多种写法：
- 具体的数字：比如2，表示匹配第2个子元素
- 关键词：even表示偶数位置，odd表示奇数位置
- 公式：比如2n表示偶数位置，2n+1表示奇数位置，n从0开始取值
下面是具体的代码示例：
/* 匹配父元素下所有子元素中的第2个，如果这个元素是p元素，就设置红色文字 */
p:nth-child(2) {
color: red;
}
/* 匹配父元素下所有子元素中的奇数位置元素，如果是div元素就设置灰色背景 */
div:nth-child(odd) {
background-color: #f0f0f0;
}
/* 匹配父元素下所有子元素中位置为3的倍数的元素，如果是li元素就设置加粗 */
li:nth-child(3n) {
font-weight: bold;
}nth-of-type选择器的基本用法
nth-of-type选择器的匹配逻辑是：先找到当前元素的父元素，然后匹配父元素下所有指定类型的子元素，再在这些同类型元素中找到第n个，直接生效，不需要再做类型判断。
它的参数写法和nth-child一致，同样支持数字、关键词、公式三种形式。
具体代码示例如下：
/* 匹配父元素下所有p元素中的第2个p元素，设置红色文字 */
p:nth-of-type(2) {
color: red;
}
/* 匹配父元素下所有div元素中的奇数位置的div元素，设置灰色背景 */
div:nth-of-type(odd) {
background-color: #f0f0f0;
}
/* 匹配父元素下所有li元素中位置为3的倍数的li元素，设置加粗 */
li:nth-of-type(3n) {
font-weight: bold;
}两者的核心区别演示
我们通过一个具体的HTML结构来对比两者的匹配差异，HTML结构如下：
<div class="container">
<h3>标题1</h3>
<p>第一个段落</p>
<p>第二个段落</p>
<span>文本1</span>
<p>第三个段落</p>
</div>首先使用nth-child选择器设置样式：
/* 规则1：匹配container下所有子元素的第2个，判断是否为p元素 */
.container p:nth-child(2) {
color: red;
}此时container的子元素顺序是：第1个是h3，第2个是p，第2个子元素刚好是p，所以第二个段落会显示红色。
再使用nth-of-type选择器设置样式：
/* 规则2：匹配container下所有p元素中的第2个p元素 */
.container p:nth-of-type(2) {
color: blue;
}container下的p元素有3个，第2个p元素是第二个段落，所以同样这个元素会显示蓝色，此时如果规则1和规则2同时生效，蓝色会覆盖红色。
我们修改一下规则1的参数：
/* 规则3：匹配container下所有子元素的第3个，判断是否为p元素 */
.container p:nth-child(3) {
color: red;
}container的第3个子元素是p（第二个段落），所以此时第二个段落会显示红色。如果我们将参数改成4：
/* 规则4：匹配container下所有子元素的第4个，判断是否为p元素 */
.container p:nth-child(4) {
color: red;
}container的第4个子元素是span，不是p元素，所以这条规则不会匹配到任何元素，没有任何样式生效。
使用场景总结
通过上面的演示，我们可以总结出两个选择器的适用场景：
- 如果需要匹配父元素下所有子元素中的第n个，并且要求这个元素是特定类型，优先使用nth-child
- 如果需要匹配父元素下相同类型元素中的第n个，不需要考虑其他类型的子元素，优先使用nth-of-type
另外需要注意，nth-child和nth-of-type都是CSS3新增的选择器，在IE8及以下版本的浏览器中不支持，如果需要兼容老旧浏览器，需要额外添加降级处理方案。
nth-of-typenth-childCSS3伪类选择器前端布局修改时间：2026-06-04 07:18:16