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

在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)：选中所有奇数位置的 <div> <li> <strong>span:nth-of-type(2n+1)</strong>：与 odd 等效，表示每隔一个 span 选中一次</li> <h3>常见用法示例</h3> <p>假设HTML结构如下：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class="brush:php;toolbar:false;"> &lt;article&gt; &lt;h2&gt;标题&lt;/h2&gt; &lt;p&gt;第一段&lt;/p&gt; &lt;img src=&quot;pic.jpg&quot; alt=&quot;&quot;&gt; &lt;p&gt;第二段&lt;/p&gt; &lt;aside&gt;侧边内容&lt;/aside&gt; &lt;p&gt;第三段&lt;/p&gt; &lt;/article&gt; </pre><p>如果想让第二个 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10560" title="生成HTML格式PPT"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="生成HTML格式PPT" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10560" title="生成HTML格式PPT">生成HTML格式PPT</a> <p>从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。</p> </div> <a href="/xiazai/skill10560" title="生成HTML格式PPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（即“第二段”）有蓝色文字，可以这样写：

  p:nth-of-type(2) {
    color: blue;
  }
  

  注意：虽然三个 <p></p> 在整个子元素中位置不同，但 :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 能帮你更精确地控制页面中某类元素的样式分布，尤其适合处理不规则结构的内容区块。