:nth-of-type伪类按同类型子元素位置选中目标，如p:nth-of-type(2)选中第二个p标签，不受其他标签干扰，常用于隔行变色、首段样式等场景。
CSS 的 :nth-of-type 伪类选择器可以根据父元素中同类型子元素的位置来选中特定元素，从而精确控制样式。它常用于对列表、段落、标题等重复结构中的某个或某几个元素设置不同样式。
基本语法与常见用法
:nth-of-type(n) 中的 n 可以是数字、关键字（如 even、odd）或公式（an + b）。
常用形式包括：nth-of-type(1)：选中第一个同类型元素 nth-of-type(even)：选中偶数位置的元素 nth-of-type(odd)：选中奇数位置的元素 nth-of-type(2n+1)：与 odd 效果相同，每两个跳一个 nth-of-type(3)：选中第三个该类型元素
例如，想让文章中第二个段落变红：
code:
p:nth-of-type(2) { color: red;}
结合标签类型精准控制
:nth-of-type 是基于元素类型的，比如你有多个 div 和 p 混合排列，使用 p:nth-of-type(2) 会选中第 二个 p 标签，不管中间有没有其他 div。
立即学习“前端免费学习笔记（深入）”；
示例结构：
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 
这是 div第一个 p
这是 span第二个 p
此时 p:nth-of-type(2) 会选中“第二个 p”，因为它是第二个 p 类型的元素。
实用场景举例
在实际开发中，这个选择器特别适合处理不规则结构。
表格中隔行变色（tr:nth-of-type(even) { background: #f2f2f2; }） 博客文章中只给第一个 h2 加图标 图片列表中每隔三张图加一个边距清空（img:nth-of-type(3n) { margin-right: 0; }）
注意与其他选择器的区别
:nth-of-type 和 :nth-child 不一样。后者是按所有子元素统一计数，而前者只看同类型元素。
比如一个 div 下第一个子元素是 p，第二个是 div，那么：
p:nth-of-type(1) 能选中这个 p p:nth-child(1) 也能选中（因为它是第一个子元素） 但如果 p 是第二个子元素，且第一个是 span，则 nth-child(2) 才能选中，而 nth-of-type(1) 依然有效
基本上就这些。掌握 :nth-of-type 能让你在不添加 class 的情况下灵活控制结构样式，关键是理解“类型”指的是标签名。
以上就是如何用css :nth-of-type控制元素样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1052669.html
微信扫一扫 
支付宝扫一扫 
