应使用tbody tr:nth-child(odd)覆盖bootstrap 5默认斑马纹，需带tbody前缀避免thead干扰，推荐在自定义css中后置加载并显式定义even行背景以确保一致性。
直接覆盖 .table-striped 的 tbody tr:nth-child(odd) 规则
Bootstrap 5 的斑马纹是通过 tbody tr:nth-child(odd) 选中奇数行并设置 background-color 实现的，默认值为 #f9f9f9。要重写它，最可靠的方式是用同等或更高优先级的 CSS 覆盖该声明，而不是试图修改 Bootstrap 源码或禁用类。
关键点在于：必须带上 tbody 前缀（Bootstrap 写的是 tbody tr:nth-child(odd)），否则仅写 tr:nth-child(odd) 可能因选择器权重不足而失效。
- 推荐在自定义 CSS 文件末尾或
<style></style>块中添加，确保加载顺序靠后 - 使用
!important并非必需，但当项目中存在多层封装（如 Vue 组件 scoped style 或第三方 UI 库）时，可能需要它来突破作用域限制 - 颜色建议用十六进制或 RGB，避免 HSL —— 部分旧版浏览器对 HSL 在
nth-child场景下渲染不稳定
用更具体的类名提升选择器权重（避免全局污染）
如果你只想改某一张表的斑马色，而不是所有 .table-striped，就别碰全局规则。给目标表格加一个自定义类（比如 table-custom-zebra），然后写带上下文的选择器：
.table-custom-zebra tbody tr:nth-child(odd) {
background-color: #eef7ff;
}
.table-custom-zebra tbody tr:nth-child(even) {
background-color: #ffffff;
}
这样既避开和其他表格冲突，又不用依赖 !important。注意：即使你只改奇数行，也建议显式定义偶数行背景（比如设为纯白），否则可能受父容器或重置样式影响而出现意外灰阶。
- 不要只写
tr:nth-child(odd)而漏掉tbody—— 表格结构若含thead或tfoot，nth-child计数会把它们算进去，导致错位 - 如果表格动态插入行（如 JS 渲染），
nth-child仍能正常工作；但若用tr:nth-of-type(odd)，在有colgroup或注释节点时可能出错，所以坚持用nth-child
警惕 Bootstrap 4 和 5 的 selector 差异
Bootstrap 4 使用的是 .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th，精确到单元格；而 Bootstrap 5 简化为 .table-striped > tbody > tr:nth-child(odd)，直接作用于行。这意味着：
- 在 BS5 中，你只需覆盖
tr的background-color，它会自然透出到td/th（前提是这些单元格没设background） - 在 BS4 中，如果某列单元格自己设置了
background，你的tr覆盖会被遮住 —— 此时得同时覆盖td和th - 检查你实际用的 Bootstrap 版本：运行
console.log(bootstrap?.version)或查 HTML 中引入的 CDN URL 路径
移动端小屏下斑马纹是否还必要？
在宽度小于 768px 的设备上，表格常被横向滚动或转为卡片堆叠，此时交替背景不仅无益，反而增加视觉噪音。可以考虑用媒体查询临时关闭：
@media (max-width: 767.98px) {
.table-striped tbody tr:nth-child(odd) {
background-color: transparent;
}
}
不过要注意：如果表格用了 border-collapse: collapse，透明背景可能导致边框“断开”感。此时更稳妥的做法是统一设为和父容器一致的背景色（比如 background-color: #fff），而非 transparent。
真正容易被忽略的是：很多团队只改了桌面端颜色，却忘了检查打印样式（@media print）。如果表格需导出 PDF，建议额外加一条打印规则，把斑马纹设为浅灰（如 #eee），避免纯黑底白字造成墨水浪费。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
