table-striped 依赖 tbody > tr:nth-of-type(odd) 生效，需配合 table 类、置于 tbody 内，且易被 transparent 背景等 CSS 覆盖；改色应覆盖 --bs-table-striped-bg 等变量；局部条纹用 nth-of-type 组合选择器；深色模式下自动适配更暗条纹色。
table-striped 类能直接启用条纹，但真要改颜色或调整行序，就得动 nth-of-type 选择器——它才是底层生效的关键。
为什么直接加 table-striped 有时没反应
不是类名写错，而是 Bootstrap 的条纹规则只匹配 tbody > tr:nth-of-type(odd)，所以：
- <tr> 必须包在 <code><tbody> 里，写成 <code><table><tr>...</tr></table> 就完全不生效
- 必须同时有 table 基础类，单独用 table-striped 不起作用
- 若自定义 CSS 里写了 tr { background: transparent !important }，会强制覆盖条纹色
- 检查 DevTools 中该选择器是否被标记为 “strikethrough”，就能快速定位是否被覆盖
table-striped 的颜色怎么换
Bootstrap 5 使用 CSS 自定义属性控制颜色，最稳妥的改法是覆盖变量：
- 条纹背景色对应 --bs-table-striped-bg
- 文字色对应 --bs-table-striped-color
- 在 <style></style> 或独立 CSS 文件中写：
table.table-striped {
--bs-table-striped-bg: #f0f8ff;
--bs-table-striped-color: #333;
}不用改
nth-of-type 选择器本身，也无需重写整条规则——变量优先级足够高，且兼容主题切换
想只给前 N 行加条纹，别硬套 table-striped
table-striped 是全局批量控制，不适合局部微调。真要限定范围，直接写轻量 CSS：
- 前 6 行隔行条纹：tbody > tr:nth-of-type(odd):nth-child(-n+6)
- 从第 2 行开始、每 3 行一纹：tbody > tr:nth-of-type(3n+2)
- 注意删掉 table-striped 类，否则和原规则冲突，导致偶数行/奇数行逻辑混乱
- 这类选择器在 IE11 及以下不支持，如需兼容老浏览器，得用 JS 动态加 class，但代价是失去语义和性能优势
深色表格下条纹变“更暗”是设计行为，不是 bug
当同时使用 table-dark 和 table-striped 时，Bootstrap 会自动把 --bs-table-striped-bg 切换为更深的灰（如 #2b2b2b），而不是简单叠加原色。
- 如果你手动覆盖了 --bs-table-striped-bg，但效果没变，检查是否漏写了 !important（仅在 scoped style 或低优先级上下文中需要）
- 更推荐方式：用 table-dark table-striped 组合 + 变量覆盖，避免自己重写整套深色逻辑
- 真正容易被忽略的是：深色模式下，部分系统级暗色主题会干扰 CSS 变量继承，建议在 :root 或 body 上显式声明变量值
