当前位置：首页 > 文章列表 > 文章 > 前端 > CSS中使用nth-of-type(1)选择器可以精准地选中某个父元素下的第一个特定类型的子元素，并对其进行样式修改。这个选择器在网页布局和样式设计中非常实用，尤其是在需要对列表、表格或其他结构化内容进行个性化样式设置时。1.基本语法nth-of-type(n)的基本语法如下：element:nth-of-type(n){/*样式规则*/}其中，element是要选择的元素类型（如div、li等）
CSS中使用nth-of-type(1)选择器可以精准地选中某个父元素下的第一个特定类型的子元素，并对其进行样式修改。这个选择器在网页布局和样式设计中非常实用，尤其是在需要对列表、表格或其他结构化内容进行个性化样式设置时。1.基本语法nth-of-type(n)的基本语法如下：element:nth-of-type(n){/*样式规则*/}其中，element是要选择的元素类型（如div、li等）
2026-04-11 21:03:36
0浏览
收藏
CSS中的:nth-of-type(1)并非选择父元素中“第一个出现的子元素”，而是严格匹配同标签名兄弟元素中源码顺序下的首个实例——它无视注释、文本节点、其他标签甚至隐藏元素，只按HTML源码中该标签的出现次序计数；正因如此，它常被误用而失效，尤其在混排结构、动态渲染或Flex/Grid布局中易与:first-child混淆；要稳妥实现“首个某类型元素”的样式控制，推荐结合语义化class锚点、:not()排除干扰，或通过DevTools精准验证匹配结果，避免因误解其“类型内序号”本质而在调试中徒劳耗时。
为什么 :nth-of-type(1) 有时不生效
它只认「同类型标签」的顺序，不是你在 DOM 里看到的第一个子元素。比如父容器里先有 常见错误现象：，再有 ，又一个 ，那第二个 是 :nth-of-type(2)，第一个才是 :nth-of-type(1)——哪怕它前面有个 。
ul > li:nth-of-type(1) 想加粗首个 li，结果没反应？检查父 ul 里是否混了注释、文本节点或