css 想选中第 n 个同类型元素怎么办_使用 nth-of-type 选择器-css教程-PHP中文网

:nth-of-type(n) 选中同标签类型下第n个元素，忽略非匹配标签、文本节点和注释；它按HTML标签名计数，不区分class/id/可见性，与:nth-child先定位再校验类型不同。

css 想选中第 n 个同类型元素怎么办_使用 nth-of-type 选择器

nth-of-type(n) 选中的是同标签类型下的第 n 个，不是父元素下所有子元素的第 n 个

很多人误以为 :nth-of-type(2) 会选中父容器里“第二个子元素”，实际它只看**标签名是否匹配**。比如父元素内有

、

、，那么第二个  才是 p:nth-of-type(2)，中间的  完全被跳过。常见错误现象：div:nth-of-type(1) 没生效，其实是前面还有别的 
（比如注释、隐藏元素、服务端注入的空 ），或者父元素第一个子元素根本不是 。
只按 HTML 标签名计数，不区分 class、id 或属性
忽略文本节点、注释节点（它们不影响计数）
如果目标元素前有同类型但被 display: none 的兄弟元素，它仍会被计入 —— :nth-of-type 不管可见性

想选中“父元素下第 n 个子元素中类型为 X 的那个”，用 :nth-child 而不是 :nth-of-type
当你要表达“第 3 个子元素，且它恰好是 
”，就得用 li:nth-child(3)。它先定位位置，再校验类型；而 :nth-of-type 是先筛选同类元素，再按顺序取第 n 个。
示例对比：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										


A
  B
  C
  D

li:nth-of-type(2) → 选中 C（第二个 
）
li:nth-child(2) → 不匹配（第二个子元素是 ）
li:nth-child(3) → 选中 C（第三个子元素，且是 
）
nth-of-type 支持公式语法，但括号里不能写变量或 CSS 自定义属性
:nth-of-type(2n)、:nth-of-type(3n+1) 都合法，但不能写成 :nth-of-type(var(--n)) 或 :nth-of-type(calc(2 * 3)) —— 这些在 CSS 中无效，浏览器直接忽略整条规则。

公式中的 n 是从 0 开始代入的整数：0, 1, 2, 3…

2n+1 等价于 odd，2n 等价于 even

负数如 -n+3 表示前 3 个（n=0→3, n=1→2, n=2→1），但要注意：没有第 0 个元素，所以实际生效的是第 1/2/3 个

兼容性没问题，但 IE8 及更早版本完全不支持
所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持 :nth-of-type，包括移动端。唯一要小心的是仍在维护的旧企业系统 —— 如果必须兼容 IE8，得用 JS 动态加 class，或改用 :first-child + 相邻兄弟选择器模拟简单情况。
容易被忽略的地方：伪类选择器的优先级和普通类选择器一样，如果同时存在 .item:nth-of-type(1) 和 .item.active，后者会覆盖前者样式 —— 别指望 :nth-of-type 自带更高权重。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！