:nth-of-type不能控制视觉行高，它只按dom中同类型兄弟元素序号匹配，与视觉排列无关；真正实现奇偶行样式需用表格的tr:nth-child或grid配合:nth-child计算索引，flex则完全不支持。
伪类 :nth-of-type 不能直接控制行高
它选中的是「同类型兄弟元素中的第 n 个」，不是表格或 flex/Grid 中的“视觉行”。比如 div:nth-of-type(odd) 选中的是所有 div 元素里序号为奇数的那些，跟它们在页面上是否排成同一行毫无关系。想靠它给“奇数行”统一设 height 或 line-height，基本无效——除非你每行只放一个同类型标签，且严格按行换标签（不现实）。
真正能控制“奇偶行”的场景只有表格和 CSS Grid
表格有天然的行结构，tr:nth-of-type(odd) 确实能选中奇数行；Grid 布局中若用 grid-auto-flow: row 并配合 grid-template-columns 控制列数，也可通过计算项索引模拟“行”，但需额外逻辑。
- 表格：直接写
tr:nth-of-type(odd) { height: 40px; }即可生效（注意：height在tr上实际影响的是整行最小高度，单元格内容仍可撑高） - Grid：假设每行 3 列，共 12 项，则第 1–3 项为第 1 行，4–6 为第 2 行……可用
:nth-child(3n+1), :nth-child(3n+2), :nth-child(3n+3)分组设置，但无法单靠:nth-of-type实现“按行奇偶”——因为所有子项类型相同，:nth-of-type等价于:nth-child - Flex 不支持按“行”选择：换行后的项目仍是线性排列，
:nth-of-type只认 DOM 顺序，不认视觉行
别误用 :nth-of-type 替代 :nth-child 或 JS 计算
常见错误是把列表渲染成一堆 <div>，然后写 <code>div:nth-of-type(odd) { height: 32px; }，结果发现第 1、3、5…个 div 被设了高，但它们根本不在同一行，视觉上毫无规律。这时候真正需要的可能是：
- 服务端或 JS 按行分组后加 class（如
row-1-odd） - 用 CSS Container Queries +
@container (width > 600px)配合不同断点调整单个项高度，间接影响行高分布 - 表格语义正确时，老老实实用
tr:nth-child(even)——这里用:nth-child更稳妥，因tr通常无其他兄弟类型
高度不一致时，line-height 和 min-height 的行为差异很关键
即使选对了元素，设 height 和 line-height 效果也完全不同：
-
height是盒模型高度，内容超出会溢出或被裁剪（取决于overflow） -
line-height只影响行内内容基线间距，对块级元素高度无直接约束 - 表格中设
tr的height，实际由内部td的min-height和内容共同决定；更可靠的是给td设height或min-height
真正要让“奇数行看起来更高”，大概率得控制单元格内容、padding 和 min-height 的组合，而不是幻想伪类能理解你的排版意图。
