根本原因是结构或加载链断了：必须同时有.table类和真实包裹数据行的，缺一不可；动态渲染时需确保dom结构正确、css变量未被覆盖、无干扰空。
为什么 table-striped 类加了却没条纹
根本原因不是类名写错，而是结构或加载链断了。Bootstrap 5 的 .table-striped 依赖两个硬性前提：.table 类必须存在，且表格必须有真实的 <tbody> 包裹所有数据行。缺一不可。
<ul><li><code><table class="table-striped"> ❌ 一定无效——必须同时带 <code>table 类：<table class="table table-striped"><li>PHP 或 Vue 动态生成时，常见错误是每行都套一个 <code><tbody>，结果浏览器解析出十几个孤立的 <code><tbody>，<code>nth-of-type(odd) 就变成“每个 tbody 的第一行都高亮”，视觉上全亮或全不亮
<tbody> 标签是否真实包裹了全部 <code><tr>，而不是被插在中间、漏掉、或被 JS 动态删掉
<h3>怎样验证 <code>table-striped 是否真生效
别靠肉眼猜，直接看 CSS 规则是否命中。打开 DevTools → Elements → 选中任意一行 <tr> → 切到 Styles 面板，搜索 <code>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> 和 <code><tr class="disabled"> 都算 <code>tr类型，会被计入；但<tr is="custom-row"> 或自定义元素（非标准标签）就不参与计数 <li>如果表格里插了 <code><tr class="list-group-divider"> 这类非标准行，或者服务端注入了空 <code><tr></tr>，它们也会被nth-of-type当作有效行，打乱奇偶节奏 - 最稳的兜底方案：不用
nth-of-type，改用 JS 手动加类，比如遍历tbody.querySelectorAll('tr')，对索引为奇数的元素加class="striped"，再配 CSS.striped { background-color: var(--bs-table-accent-bg); }
真正难的不是写那行 CSS，而是改完之后没去 DevTools 里确认
<tbody> 是否真实存在、<code>--bs-table-accent-bg 是否被父级变量覆盖、以及那些看不见的空 <tr> 是否悄悄搅局。</tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
