应使用 tbody > tr:nth-of-type(odd) 替代 nth-child(odd) 以避免 caption/thead 干扰；需统一 .table-hover 悬停色；响应式下 safari 可能失效，深色模式须用 @media 手动适配。
直接覆盖 .table-striped 的 :nth-child(odd) 样式
Bootstrap 5 的斑马纹靠 .table-striped 类触发，底层用的是 tbody tr:nth-child(odd)（注意：不是 tr:nth-of-type(odd)），所以重写必须精准命中这个选择器。默认背景色是 #f8f9fa，但你不能只改 .table-striped 本身——它不带背景，只是启用规则。
实操建议：
- 在 Bootstrap CSS 之后引入自定义样式，确保层叠优先级
- 用相同或更高权重的选择器，例如：
tbody tr:nth-child(odd) { background-color: #eef2ff !important; } - 如果表格有
thead或caption，nth-child计数会包含它们，导致错位；此时改用tbody > tr:nth-of-type(odd)更稳妥（但需确认 Bootstrap 没加其他 wrapper 元素）
避免被 .table-hover 干扰颜色逻辑
当同时使用 .table-striped 和 .table-hover 时，悬停态的 :hover 会覆盖奇数行背景色，而 Bootstrap 默认 hover 色是 #e9ecef，可能和你的新斑马色冲突，造成视觉跳变。
实操建议：
- 统一 hover 色与你的斑马主色协调，例如：
.table-striped tbody > tr:hover { background-color: #dce6ff; } - 不要只写
tr:hover，必须带上tbody >前缀，否则会影响表头或空行 - 如果禁用 hover，直接移除
.table-hover类比覆盖 CSS 更干净
响应式表格里 .table-responsive 可能破坏 nth-child 计数
当表格包在 .table-responsive 内，且内部有横向滚动时，某些浏览器（尤其是 Safari）会因渲染机制让 tbody tr:nth-child(odd) 失效——表现为所有行都变成偶数色或全白。
实操建议：
- 改用
tbody > tr:nth-of-type(odd)，它只看同级tr元素类型，不受caption、注释或动态插入内容干扰 - 确保
tbody显式存在（Bootstrap 5 默认生成，但若手写 HTML 漏了，nth-child会从table子元素开始计数，出错概率大增） - 如仍异常，可退一步用 JS 动态加类：
document.querySelectorAll('tbody tr').forEach((tr, i) => i % 2 === 0 && tr.classList.add('striped-row'))，再配 CSS
深色模式下需要额外处理 @media (prefers-color-scheme: dark)
Bootstrap 5.3+ 支持深色模式，但 .table-striped 的斑马色不会自动适配——它的 nth-child 规则在深色主题下仍用浅色背景，导致文字不可读。
实操建议：
- 在深色媒体查询中重新声明：
@media (prefers-color-scheme: dark) { .table-striped tbody > tr:nth-of-type(odd) { background-color: #2d3748; } } - 别依赖 Bootstrap 的
data-bs-theme="dark"，因为.table-striped本身不响应这个属性，必须手动干预 - 如果项目用 CSS 自定义属性（如
--bs-table-striped-bg），Bootstrap 5.3+ 允许覆盖，但仅限于未启用深色模式时；开启后仍需媒体查询兜底
tr 元素和计算路径，比硬套文档更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
