斑马纹没生效需先确认table标签是否同时添加class="table table-striped"，因bootstrap条纹样式依赖.table-striped > tbody > tr:nth-of-type(odd)选择器，缺.table类则规则链断裂。
斑马纹没生效？先确认 table 标签有没有 class="table"
Bootstrap Table 的斑马纹（table-striped）不是自动开启的，它依赖于显式添加的 class。如果只写了 <table> 但没加 <code>class="table table-striped"，CSS 规则压根不会匹配——因为 Bootstrap 的斑马纹样式是通过 .table-striped > tbody > tr:nth-of-type(odd) 这类带层级的选择器定义的，没 .table 前缀，整个规则链就断了。
常见错误：只加 table-striped，漏掉基础 table 类；或者用在自定义封装的组件里，但内部 table 没透传 class。
- 必须同时存在
class="table table-striped"（顺序无关） - 如果用了 Bootstrap 5+，确保没禁用
prefers-color-scheme相关的暗色模式覆盖逻辑（某些定制 build 会删掉这部分） - 检查是否被更高优先级的 CSS 覆盖，比如某个全局
tr { background: white !important }
想换颜色？直接覆盖 --bs-table-striped-bg CSS 变量
Bootstrap 5.3+ 把斑马纹背景色抽成了 CSS 自定义属性，改起来比写一堆 !important 清爽得多。只要在 <table> 或其父容器上设置变量值，就能局部生效，不影响其他表格。<pre class="brush:php;toolbar:false;"></pre>
<table class="table table-striped">
<style>
.table-striped {
--bs-table-striped-bg: #f0f9ff; /* 浅蓝条纹 */
}
</style>
...
</table>
<ul>
<li>变量名固定为 <code>--bs-table-striped-bg（Bootstrap 5）或 --bs-table-accent-bg（部分旧版文档误写，以实际源码为准）
:root 全局改，容易污染其他表格；推荐 inline style 或 scoped class$table-striped-bg 变量隔两行一色、从第二行开始？别硬套 nth-of-type，改选择器更稳
默认斑马纹是 odd 行着色，但业务常要「偶数行高亮」或「每三行一组」。直接改 nth-of-type(even) 看似简单，实际容易和 Bootstrap 的 hover、active 状态样式冲突——因为它们也依赖 tr 的位置关系。
更可靠的做法是去掉 table-striped，自己写独立选择器：
- 用
nth-child而非nth-of-type，避免被thead/caption扰乱计数 - 如果表格有固定表头（
sticky-header），注意tbody内部的tr才该被选中，此时应限定为tbody tr:nth-child(...) - Bootstrap 的 hover 效果（
.table-hover）默认用:hover，和你的自定义条纹不冲突，但记得测试叠加效果
Vue/React 里动态切换斑马纹？别用 v-if 切 class，用 class 绑定更安全
在框架里控制斑马纹开关时，有人写 v-if="isStriped" 包裹整个 <table>，这会导致 DOM 重建、滚动位置丢失、状态重置。正确做法是用 class 绑定动态增删 <code>table-striped。
Vue 示例：
React 示例：
- 确保
isStriped是响应式变量，而不是一次性计算值 - 如果搭配
table-dark使用，注意table-striped在暗色主题下默认用的是浅灰，可能不够明显，需同步调整--bs-table-striped-bg - 服务端渲染（SSR）场景下，初始 class 必须和服务端输出一致，否则 hydration 会报警告
改斑马纹看着是调个颜色，实际卡点全在选择器作用域、变量作用范围和框架生命周期里。最常出问题的不是 CSS 写错，而是 class 没挂对、变量没作用到正确节点、或者框架里 class 切换触发了意外重渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
