根本原因是结构或加载链断了：必须同时有.table类和真实包裹数据行的<tbody>，缺一不可；动态渲染时需确保DOM结构正确、CSS变量未被覆盖、无干扰空<tr>。
为什么 table-striped 类加了却没条纹
根本原因不是类名写错，而是结构或加载链断了。Bootstrap 5 的 .table-striped 依赖两个硬性前提：.table 类必须存在，且表格必须有真实的 <tbody> 包裹所有数据行。缺一不可。
-
<table class="table-striped">❌ 一定无效——必须同时带table类：<table class="table table-striped"> - PHP 或 Vue 动态生成时，常见错误是每行都套一个
<tbody>，结果浏览器解析出十几个孤立的<tbody>，nth-of-type(odd)就变成“每个 tbody 的第一行都高亮”，视觉上全亮或全不亮 - 检查 DevTools 的 Elements 面板，确认
<tbody>标签是否真实包裹了全部<tr>，而不是被插在中间、漏掉、或被 JS 动态删掉
怎样验证 table-striped 是否真生效
别靠肉眼猜，直接看 CSS 规则是否命中。打开 DevTools → Elements → 选中任意一行 <tr> → 切到 Styles 面板，搜索 nth-of-type(odd)。
- 如果看到
.table-striped > tbody > tr:nth-of-type(odd)这条规则，并且 background-color 值已计算（比如rgba(0, 0, 0, 0.05)），说明样式加载且结构正确 - 如果这条规则灰掉（strike-through）或根本没出现，说明：① CSS 文件没加载成功；② 选择器权重被更高优先级规则覆盖（比如某个全局
tr { background: none !important }）；③ DOM 结构不满足.table-striped > tbody > tr路径 - 临时在控制台运行
getComputedStyle(document.querySelector('.table-striped tbody tr:nth-of-type(1)')).backgroundColor，能直接拿到计算后的背景色值，比看 Styles 更准
改条纹颜色时为什么推荐用 CSS 变量
直接写 tr:nth-of-type(odd) { background: #f0f8ff !important } 看似快，但容易和 .table-hover、.table-dark 冲突，还绕过框架主题机制。
- Bootstrap 5.3+ 提供
--bs-table-accent-bg变量统一控制条纹色，默认值是var(--bs-table-striped-bg)，改它就能全局生效 - 局部修改更安全：给表格加 wrapper 类，比如
<div class="my-report"><table class="table table-striped">...</table></div>，再写.my-report { --bs-table-accent-bg: #e8f4ff; } - 用了
.table-dark？必须同步设--bs-table-dark-accent-bg，否则深色表里条纹会变透明——这个点几乎没人提，但实际项目里高频翻车
动态渲染后条纹突然消失的隐藏坑
Vue/React 渲染完，DOM 看着结构没问题，但条纹就是不出现。问题常出在节点类型干扰 nth-of-type 计数。
立即学习“前端免费学习笔记（深入）”；
-
nth-of-type(odd)按标签名计数，<tr>和<tr class="disabled">都算tr类型，会被计入；但<tr is="custom-row">或自定义元素（非标准标签）就不参与计数 - 如果表格里插了
<tr class="list-group-divider">这类非标准行，或者服务端注入了空<tr></tr>，它们也会被nth-of-type当作有效行，打乱奇偶节奏 - 最稳的兜底方案：不用
nth-of-type，改用 JS 手动加类，比如遍历tbody.querySelectorAll('tr')，对索引为奇数的元素加class="striped"，再配 CSS.striped { background-color: var(--bs-table-accent-bg); }
<tbody> 是否真实存在、--bs-table-accent-bg 是否被父级变量覆盖、以及那些看不见的空 <tr> 是否悄悄搅局。 
