:nth-of-type选择器根据元素类型和同类型兄弟位置匹配，n可为数字、even/odd或an+b公式，如p:nth-of-type(2)选中第二个p；与:nth-child不同，它只计同类标签；常用于表格隔行变色tr:nth-of-type(even)、首段加大p:nth-of-type(1)等场景，IE9+支持，n从1开始，需确保目标存在。
CSS中的 :nth-of-type 选择器用于选中父元素下特定类型的第n个子元素。它根据元素的类型（标签名）和在同类型兄弟元素中的位置来匹配，非常适合对某类标签进行精确控制，比如只选中第2个、第4个p标签，或每隔一个div添加样式。
基本语法与工作原理
:nth-of-type(n) 中的 n 可以是数字、关键字（如 even、odd）或公式（an + b）。选择器会先筛选出指定类型的元素，再按它们在文档流中的顺序进行计数。
例如：-
p:nth-of-type(2)：选中父元素中第二个 p 元素 -
div:nth-of-type(even)：选中偶数位置的 div -
li:nth-of-type(3n+1)：从第1个开始，每3个li选一个（1, 4, 7...）
与 :nth-child 的区别
关键在于匹配逻辑不同。:nth-child 是基于所有子元素的位置，而 :nth-of-type 只看同类型元素的位置。
举例说明：<div><p>段落1</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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><span>其他标签</span><p>段落2</p> <!-- 这是第2个p，也是p:nth-of-type(2) --></div>此时 p:nth-of-type(2) 能选中“段落2”，但 p:nth-child(2) 不会生效，因为第二个子元素是 span，不是 p。
实用场景示例
在实际开发中，:nth-of-type 常用于列表、表单、排版等需要差异化样式的场景。
-
表格隔行变色：
tr:nth-of-type(even) { background: #f0f0f0; } -
文章首段加大字体：
p:nth-of-type(1) { font-size: 1.2em; } -
仅对特定位置的按钮加边距：
button:nth-of-type(3) { margin-left: 10px; }
注意事项与兼容性
该选择器在现代浏览器中支持良好，IE9及以上版本均支持。使用时注意以下几点：
- n 从 1 开始计数，不是 0
- 公式 an + b 中 a 是步长，b 是偏移量，如 2n+1 表示奇数项
- 确保目标元素确实存在于同类型兄弟中，否则不会命中
基本上就这些。掌握 :nth-of-type 能让你更精细地控制页面结构，避免添加多余类名，让CSS更简洁高效。
