应使用 tbody tr:nth-child(odd) 而非 tr:nth-child(odd)，因后者会误染 thead/tfoot 行；Sass 通过 map + @each 生成多主题隔行色，支持编译期明暗计算，IE8 需 class 或 JS fallback。
tr:nth-child(odd) 为什么不能直接写在全局样式里？
因为 tr:nth-child(odd) 会匹配所有 tr 元素，包括 thead 和 tfoot 里的行——表头第一行常被意外染色。真实项目里几乎没人想要表头变灰。
稳妥做法是限定作用域：tbody tr:nth-child(odd)。这能确保只对数据行生效，且语义清晰、可访问性友好。
- 别用
tr:nth-of-type(odd)：表格结构中tr的兄弟节点包含thead/tbody等非tr元素，:nth-of-type实际退化为全选，无法实现隔行效果 - 动态插入新
tr（如 JSappend()）后，CSS 会自动重匹配，无需额外 JS 干预 - 合并单元格（
rowspan）不影响计数，nth-child只认标签存在与否，不看渲染高度
怎么用 Sass 批量生成多主题的隔行色规则？
直接写死颜色值（比如 background-color: #f5f5f5）会导致换主题时要改多处。Sass 的优势在于用 map + @each 把逻辑收口。
先定义主题色 map：
立即学习“前端免费学习笔记（深入）”；
$table-zebra-colors: ( "light": #f9f9f9, "dark": #2d2d2d, "blue": #eef7ff );
再用 @each 输出对应规则：
@each $theme, $bg in $table-zebra-colors {
.table-#{$theme} tbody tr:nth-child(odd) {
background-color: $bg;
}
}
编译后会生成 .table-light tbody tr:nth-child(odd)、.table-dark tbody tr:nth-child(odd) 等独立规则，HTML 只需切换 class 即可。
- 别把颜色定义成独立变量（如
$light-bg: #f9f9f9），那样无法遍历，也容易和 map 不同步 - map key 名（如
"light"）会被插值进 class 名，所以别加多余引号或空格 - 如果还要支持深色模式切换，建议用
data-theme="dark"配合 CSS 变量，Sass 只负责生成初始静态规则
能否用 Sass 函数动态计算隔行色明暗度？
可以，但仅限编译期——Sass 函数不会在浏览器里实时运行。比如你希望偶数行比奇数行略深一点，可以用 darken() 或 mix() 生成。
例如：
$base-row-color: #ffffff; $odd-bg: $base-row-color; $even-bg: darken($base-row-color, 2%); // 编译时算出 #f9f9f9
然后分别应用：
tbody tr:nth-child(odd) { background-color: $odd-bg; }
tbody tr:nth-child(even) { background-color: $even-bg; }
-
darken($color, 2%)的2%是百分比单位，不是小数；对纯白#fff调用会 clamp 到合法范围，结果可能不如预期 - 浅底色推荐用
mix($color, white, 10%)替代darken()，控制更稳定 - 避免在函数里拼接字符串（如
@return 'rgba(' + $r + ',' + $g + ...)），Sass 要求返回真实颜色值，否则编译后 CSS 无效
IE8 兼容场景下怎么 fallback？
:nth-child() 在 IE8 及更早版本完全不支持。如果必须兼容，Sass 本身帮不上忙——它生成的仍是现代 CSS。
可行路径只有两条：
- 服务端渲染时给每行加 class（如
class="odd"/class="even"），再用传统 class 选择器 - 前端 JS 动态判断并添加 class，例如
document.querySelectorAll('tbody tr')后按索引设 class
注意：用 display: table 模拟表格的 div 结构，只要它们是父元素的直接子元素且顺序连续，nth-child 依然有效；但这种模拟结构本身在 IE8 就有兼容风险，不建议混用。
真正麻烦的不是 Sass 怎么写，而是要不要为一个早已淘汰的浏览器增加维护成本——多数团队现在会直接放弃 IE8 支持。
