CSS:nth-of-type选择器如何使用_特定类型子元素样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS:nth-of-type选择器如何使用_特定类型子元素样式

2025-11-18

浏览次数：次

返回列表

:nth-of-type根据元素类型选择第n个同类型子元素，如p:nth-of-type(2)选中第二个段落，支持数字、odd/even及an+b公式，与:nth-child不同在于仅计算指定标签类型的顺序，适用于精准控制不规则结构中某类元素的样式。

css:nth-of-type选择器如何使用_特定类型子元素样式

在CSS中，:nth-of-type 选择器用于选中父元素下特定类型的第n个子元素。它根据元素的类型（标签名）进行匹配，而不是所有子元素中的位置。这使得我们可以精准地为某一类标签设置样式，比如只对第2个、第4个或奇数位置的段落应用特殊样式。

基本语法

element:nth-of-type(n) { 样式规则 } 是其基本写法。其中 element 是目标标签名，n 可以是数字、关键字或公式。

例如：

p:nth-of-type(2)：选中父元素中第二个 <p></p> 标签
div:nth-of-type(odd)：选中所有奇数位置的
span:nth-of-type(2n+1)：与 odd 等效，表示每隔一个 span 选中一次


常见用法示例
假设HTML结构如下：
<article>
  <h2>标题</h2>
  <p>第一段</p>
  @@##@@
  <p>第二段</p>
  <aside>侧边内容</aside>
  <p>第三段</p>
</article>
如果想让第二个 <p></p>（即“第二段”）有蓝色文字，可以这样写：
p:nth-of-type(2) {
  color: blue;
}
注意：虽然三个 <p></p>
                    
                        
                            
                        
                        
                            Docky AI
                            
多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作

                            
                                
                                100
                            
                        
                        
                            查看详情
                            
                        
                    
                 在整个子元素中位置不同，但 :nth-of-type 只计算 <p></p> 类型的顺序，因此第二个 <p></p> 被正确选中。
使用关键词和公式
:nth-of-type 支持多种参数形式，灵活控制样式应用：


even / odd：分别匹配偶数位和奇数位的同类型元素

an+b：线性公式，a 是循环周期，b 是偏移量

n：从第一个开始全部匹配，常用于重置样式

例如：
/* 隔行变色 */
tr:nth-of-type(even) {
  background-color: #f0f0f0;
}
<p>/<em> 每第三个 div 高亮 </em>/
div:nth-of-type(3n) {
border: 2px solid red;
}</p>
与 :nth-child 的区别

很多人容易混淆 :nth-of-type 和 :nth-child。关键区别在于：

:nth-of-type 只看同类型元素的顺序
:nth-child 看的是在所有子元素中的总位置

以上面HTML为例，p:nth-child(2) 能匹配到第一个 <p></p>，因为它确实是第2个子元素；而 p:nth-of-type(2) 匹配的是第二个 <p></p>，不管它在整体中排第几。
基本上就这些。掌握 :nth-of-type 能帮你更精确地控制页面中某类元素的样式分布，尤其适合处理不规则结构的内容区块。