最干净的做法是覆盖CSS变量--bs-table-accent-bg；全局在:root中设置，局部用自定义类加nth-of-type(odd)规则；深色主题需同步设置--bs-table-dark-accent-bg。
直接改 table-striped 的背景色，别碰 nth-child
Bootstrap 5 默认用 .table-striped > tbody > tr:nth-of-type(odd) 实现斑马纹，颜色由 CSS 变量 --bs-table-accent-bg 控制。你不需要重写伪类选择器，更不该写 tr:nth-child(odd) ——它在有 <caption></caption> 或注释节点时会错位，而 nth-of-type 更稳。
最干净的做法是覆盖变量：
- 全局改：在
:root或主样式文件里加:root { --bs-table-accent-bg: #eef2ff; } - 局部改：给表格加自定义类，比如
class="table table-striped my-striped-table"，再写.my-striped-table > tbody > tr:nth-of-type(odd) { background-color: #eef2ff; } - 如果用了深色主题（
.table-dark），变量名是--bs-table-dark-accent-bg，得一并设
table-striped 和自定义 CSS 冲突的典型表现
常见错误现象：tr:nth-child(odd) { background: #f0f0f0; } 完全不生效，或者只在部分行起作用。
- 原因往往是 Bootstrap 的选择器权重更高（如
.table-striped > tbody > tr:nth-of-type(odd)），或某些定制版仍带!important - 加
!important能临时压住，但会干扰暗色模式切换、后续主题扩展，且和table-hover交互时容易出错（hover 会覆盖 odd 行背景） - 如果表格里混用了
.table-hover，悬停时奇数行颜色会被覆盖——这是正常行为，不是 bug；若要 hover 也保持条纹感，得额外写.table-hover tbody tr:hover:nth-of-type(odd)
想只对前 N 行加条纹？别删 table-striped，用组合伪类
比如只要前 6 行有斑马纹（即 tr:nth-of-type(odd):nth-child(-n+6)），直接覆盖原规则即可，不用移除 table-striped 类。
- 写法示例：
.my-table > tbody > tr:nth-of-type(odd):nth-child(-n+6) { background-color: #f8f9fa; } - 注意顺序：
nth-of-type(odd)先筛奇数行，nth-child(-n+6)再限前 6 个元素；反过来写（nth-child(-n+6):nth-of-type(odd)）语义相同，但可读性差 - 这种写法在响应式表格（
.table-responsive）里依然有效，因为伪类作用对象仍是<tr>，不是外层 <code>div用 Sass 编译项目？改变量比写 CSS 更可靠
如果你的项目基于 Bootstrap Sass 源码（不是 CDN 引入的 CSS），直接改
$table-striped-bg变量，比后期覆盖 CSS 更彻底。- 在自定义 Sass 文件中，
$table-striped-bg: #eef2ff;必须在引入 Bootstrap_tables.scss前声明 - 同时检查
$table-dark-striped-bg（对应.table-dark场景），避免深色表里条纹消失 - 变量方式天然兼容所有衍生类（如
.table-sm、.table-bordered），不会漏掉任何场景
真正容易被忽略的是：很多团队只改了浅色条纹，却忘了深色主题下对应的变量，结果在暗色模式里斑马纹“突然消失”——这不是 bug，是变量没配齐。
- 在自定义 Sass 文件中，
