scss 中斑马纹维护性关键在于变量语义化、mixin 封装、优先级控制及兼容降级。需抽离 $table-zebra-odd-bg 等带前缀变量，用 @mixin table-zebra 支持自定义参数与选择器，避免 !important，预留 ie 降级和 rowspan 场景处理。
直接用 tbody tr:nth-of-type(odd) 就能生效，但 SCSS 里真正影响维护性的不是选择器本身，而是变量组织、作用域控制和兼容兜底逻辑。
用 SCSS 变量统一管理斑马色值
硬编码颜色在主题切换或暗色模式适配时会失控。必须把颜色抽成变量，并带语义前缀：
-
$table-zebra-odd-bg: rgba(245, 245, 245, 0.8);—— 不用#f9f9f9，透明度保留层叠空间 -
$table-zebra-even-bg: #fff;—— 偶数行保持纯白，避免多层叠加变灰 - 声明在
_variables.scss或_theme.scss中，不散落在组件文件里 - 搭配
dark-mode类切换时，只需重写变量值，不用改选择器逻辑
封装为可复用的 SCSS mixin
不同表格可能需要不同斑马节奏（如每三行一组），靠重复写 :nth-child 容易出错。用 mixin 抽离参数：
@mixin table-zebra($odd-bg: $table-zebra-odd-bg, $even-bg: $table-zebra-even-bg, $selector: "tbody tr") {
#{$selector}:nth-of-type(odd) {
background-color: $odd-bg;
}
#{$selector}:nth-of-type(even) {
background-color: $even-bg;
}
}
// 使用
.my-table {
@include table-zebra();
}
.another-table {
@include table-zebra($odd-bg: #eef, $even-bg: #fff, $selector: "tbody > tr");
}
-
$selector参数确保能适配自定义结构（比如某些框架强制加 wrapper div） - 默认用
nth-of-type而非nth-child，避开<thead> 或空注释节点干扰 <li>不默认写 <code>!important，靠 CSS 优先级和作用域控制覆盖风险 - 斑马色只设
background-color，不碰background全属性，留出 hover 和选中态叠加空间 - hover 状态用
tbody tr:hover { background-color: darken($table-zebra-odd-bg, 5%) !optional; }—— 注意这里用!optional（SCSS 6.0+）或手动加权重，而非暴力!important - JS 插入新行时，确保 append 到
tbody，否则nth-of-type计数失效；若用虚拟滚动，需配合key或data-index手动控制类名 - 禁用
tr style="background: ..."，这类内联样式会直接压掉 SCSS 编译后的规则 - 在顶层
body加class="no-css-vars no-nth-support"（由 Modernizr 或 feature detect 注入） - 对应写降级规则：
.no-nth-support tbody tr:nth-of-type(odd) { background-color: transparent; } .no-nth-support tbody tr { background-color: #fff; } .no-nth-support tbody tr:nth-of-type(2n) { background-color: $table-zebra-odd-bg; }—— 这种写法在 IE11 里会被忽略，但现代浏览器仍走主逻辑 - 更稳妥的是用
@supports not (selector(:nth-of-type))包裹降级块，但注意它不支持 IE - 真正要兼容 IE8–10，就得放弃伪类，改用 JS 在
DOMContentLoaded后批量加row-odd/row-even类，SCSS 里只管这些 class 的样式
避免内联样式与 JS 动态 class 冲突
很多表格库（如 ag-Grid、React Table）会动态加 row-selected 或 row-hover 类，直接写 tr:hover 很容易被覆盖：
IE11 及以下的降级方案要提前埋点
SCSS 本身不解决兼容性，但结构上得预留出口：
最常被忽略的一点：含 rowspan 的表格，nth-of-type 依然按 DOM 顺序计数，视觉上会错位。这种场景下，SCSS 再优雅也没用，得换 JS 控制或重构表格结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
