不能。nth-of-type只按元素类型计数，无法识别视觉行序或同时控制多属性；实现混合效果需拆分规则并注意层叠与specificity，且dom结构变动易导致失效。
nth-of-type 能不能直接实现「奇数行蓝、偶数行灰、第3行加边框」这种混合效果？
不能。nth-of-type 只认元素类型（比如 tr、li），不认视觉“行”或 DOM 层级位置；它也不能同时控制多个样式属性（背景+边框）的条件组合。真要实现这类需求，得拆开写多条规则，且必须注意层叠顺序和 specificity。
- 单独用
tr:nth-of-type(odd)只能设背景，加边框会污染所有奇数tr，不是“仅第3行” -
tr:nth-of-type(3)优先级和tr:nth-of-type(even)冲突时，后写的会覆盖——但更危险的是：如果某行是<tr class="special">，而你又写了 <code>.special规则，class 的权重可能更高，导致 nth 规则失效 - 浏览器对
nth-of-type的解析严格依赖 HTML 结构：中间插个<tbody> 或注释节点不影响；但插个 <code><div> 或 <code><th> 就会重置计数 <h3>为什么用 nth-child 比 nth-of-type 更可控？</h3> <p>当表格里混有 <code>thead、tfoot或非tr元素时，nth-of-type会跳过它们只数tr，而nth-child按 DOM 顺序数所有子元素——这反而让“第3行”这种绝对位置描述更可靠。- 想让表格第1、3、5行蓝底，写
tr:nth-child(odd)；但如果thead里有tr，它也会被算进去，结果第一行可能是表头——这时得用tbody tr:nth-child(odd) -
nth-child(3n)表示每3个一循环（3、6、9…），不是“每行隔3个”，别和nth-of-type(3)混淆 - IE8 不支持
nth-child和nth-of-type，如需兼容，得用 JS 或服务端打 class
复杂隔行变色必须用 CSS 变量 + calc 吗？
不用。CSS 变量和
calc()在这里属于高射炮打蚊子。真正卡住人的，是「不同区域用不同规则」时的冲突处理。- 比如：前5行按奇偶变色，第6行开始每4行一组（蓝/灰/黄/白），此时不能只靠一条
nth-child，得拆成tr:nth-child(-n+5)和tr:nth-child(n+6)两段，再分别叠加odd/even或4n+0/4n+1等 - 颜色值重复写 4 次不如提成变量，但变量本身不解决逻辑分组问题；
calc()在伪类里根本用不了 - 用
:is()可以合并选择器（如tr:is(:nth-child(3), :nth-child(7))），但老浏览器不支持，且可读性反而下降
实际项目中最容易漏掉的渲染陷阱
样式生效了，但滚动时颜色错乱，或者 React/Vue 动态插入行后规则突然失效——问题往往不在 CSS 本身。
- 框架组件（如
<table>）可能把 <code>tr渲染在tbody外，或用display: contents让tr不成为真实子元素，导致nth-child完全失灵 - 服务端渲染（SSR）生成的 HTML 和客户端 hydrate 后的 DOM 结构不一致，比如 SSR 没加
thead，客户端加了，nth-of-type计数就偏移 - 用
visibility: collapse隐藏某行时，它仍参与nth-child计数；但用display: none就不参与——这个差异会让“第3行”的定位飘移
CSS 隔行变色看着简单，真正难的是结构变动时规则是否健壮。别迷信一行
nth解决所有，先看清 DOM 树长什么样，再决定用child还是of-type，最后留神动态内容怎么改写它。 - 想让表格第1、3、5行蓝底，写
