使用 :nth-of-type(n) 可为表格奇偶行设置不同样式以提升可读性，如 tr:nth-of-type(odd) 和 tr:nth-of-type(even) 实现隔行变色，相比 :nth-child 更精准，因只计算同类型子元素；还可通过 tr:nth-of-type(3n) 调整特定行高，结合 box-sizing 控制布局，并用 :not() 排除特殊行，合理运用使表格更清晰且代码简洁。
在网页表格或列表中，为奇数行和偶数行设置不同样式能提升可读性。:nth-of-type(n) 是一种强大的 CSS 伪类选择器，可以精准选中特定类型的第 n 个子元素，常用于实现交替行样式，比如隔行变色或调整高度。
理解 :nth-of-type(n) 的基本用法
:nth-of-type(n) 会根据元素在其父容器中的同类型兄弟元素的位置来匹配。n 可以是数字、关键字（如 odd、even）或公式（如 2n+1）。
例如，要为表格中的偶数行设置背景色：
tr:nth-of-type(even) {
background-color: #f2f2f2;
}
上面的代码会选中所有 立即学习“前端免费学习笔记（深入）”； 通过组合 odd 和 even，可以轻松实现斑马条纹效果： 这种方法比直接使用 :nth-child 更安全，因为它只计算相同标签类型的子元素。如果表格中包含 或其他非 除了背景色，也可以用 :nth-of-type 调整某些行的高度，增强视觉层次： 上述规则会让每第3行（第3、6、9...行）更高，适用于展示更多信息或强调特定数据。结合 margin 或 padding 使用时，注意避免破坏表格布局，建议统一设置 box-sizing: border-box 来控制尺寸计算方式。 使用 :nth-of-type 时需注意以下几点： 基本上就这些。合理使用 :nth-of-type(n) 能让表格更清晰易读，同时保持代码简洁。 元素中处于“偶数位置”的行（第2、4、6...行），并应用灰色背景。使用 odd 则可选中奇数行。 实现隔行变色效果
tr:nth-of-type(odd) {
background-color: #e9e9e9;
}
tr:nth-of-type(even) {
background-color: #f7f7f7;
}
的行，:nth-of-type 依然能正确识别 中的
顺序。
调整行高与视觉节奏
tr:nth-of-type(3n) {
height: 60px;
}
实用技巧与注意事项
