CSS中的:nth-of-type选择器是一个非常实用的工具，它允许你根据元素在同类型兄弟元素中的位置来选中并设置样式。这个选择器特别适合在不添加额外类名的情况下，对特定类型的元素（如段落、标题、列表项等）进行精确控制。
理解 :nth-of-type 的基本语法
:nth-of-type(n) 会匹配其父元素下第 n 个指定类型的子元素。这里的 n 可以是数字、关键词或公式（如 2n+1）。
例如，你想为一个容器中的第二个 p 标签添加特殊样式：
p:nth-of-type(2) {
color: red;
font-weight: bold;
}
这段代码会让页面中每个父元素内的第二个 p 元素文字变为红色加粗。
立即学习“前端免费学习笔记（深入）”；
使用公式实现奇偶行样式（常见于表格）
在表格或列表中，我们经常需要交替设置背景色。这时可以结合 even 和 odd 关键词，或者使用代数表达式：
-
tr:nth-of-type(even)：选中所有偶数行 -
tr:nth-of-type(odd)：选中所有奇数行 -
tr:nth-of-type(2n)：与 even 等效 -
tr:nth-of-type(2n+1)：与 odd 等效
示例：为表格奇数行设置浅灰色背景：
tr:nth-of-type(odd) {
background-color: #f0f0f0;
}
灵活使用表达式选择特定模式的元素
你可以用更复杂的表达式来选择有规律的位置。比如每第三个 div：
div:nth-of-type(3n) {
margin-top: 20px;
}
或者从第2个开始，每4个选一次（即第2、6、10…个）：
section:nth-of-type(4n+2) {
border-left: 3px solid blue;
}
注意与其他选择器的区别
:nth-of-type 是按元素类型计数的，和 :nth-child 不一样。举个例子：
<div> <p>第一段</p> <span>中间内容</span> <p>第二段</p> </div>
在这个结构中：
-
p:nth-of-type(1)选中第一个p -
p:nth-of-type(2)选中第二个p -
p:nth-child(2)不会选中任何p，因为第二个子元素是span
因此，当你关注的是“某种标签的第几个”时，优先使用 :nth-of-type。
基本上就这些。掌握这个选择器能让你的CSS更简洁、语义更清晰，尤其是在处理结构规律但无类名标记的内容时特别有用。
