Bootstrap表格斑马线应使用table-striped类而非手写nth-child；需配合table基础类，作用于tbody内偶数行，thead和caption不着色，推荐用Sass变量自定义或wrapper类覆盖。
Bootstrap表格默认不带斑马线，table-striped 类才是正解
Bootstrap 从 v3 到 v5 都自带斑马线支持，根本不用手写 nth-child。很多人翻文档没注意类名，硬套 CSS 伪类，结果被优先级或 Bootstrap 的 !important 覆盖得莫名其妙。
正确做法是直接给 <table> 加上 table-striped 类：
<table class="table table-striped">
<tbody>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</tbody>
</table>
- 必须配合
table基础类一起用，单独table-striped无效 - v5 中默认作用于
<tbody>内的偶数行（:nth-of-type(even)），不是:nth-child(odd) - 如果表格有
<thead>或<caption>，它们不会被着色——这是预期行为，不是 bug
手动加 nth-child 斑马线时，CSS 优先级常被 Bootstrap 覆盖
想自定义颜色或兼容老项目？可以写，但得绕过 Bootstrap 的样式压制。直接写 tr:nth-child(odd) { background: #f8f9fa; } 很可能不起作用。
- Bootstrap v4/v5 的
.table-striped > tbody > tr:nth-of-type(odd)带!important（v5.3+ 已移除，但部分定制版仍保留） - 推荐用更具体的路径覆盖：比如
.my-table tbody tr:nth-child(odd)，再加!important（仅当必要） - 注意
nth-child和nth-of-type区别：如果<tr>前有<caption>或注释节点，nth-child会错位，nth-of-type更稳
响应式表格里 table-responsive 会影响 nth-child 生效位置
套了 table-responsive 后，实际滚动容器是外层 <div>，而 tr 仍在内部 <table> 里——这本身不影响伪类，但容易让人误判选择器范围。
立即学习“前端免费学习笔记（深入）”；
- 斑马线样式必须写在
<table>或其子元素上，不能写在外层<div class="table-responsive"> - 如果用了
sticky-header或固定表头插件，tbody和thead可能被拆到不同容器，此时nth-child只对当前容器内元素生效 - 移动端小屏下，某些 Bootstrap 版本会把表格转为卡片布局（
table-sm+ 媒体查询），此时伪类规则可能完全失效
用 Sass 自定义 $table-striped-bg 比硬写 CSS 更可靠
如果你用的是 Bootstrap 源码（Sass 版），改变量比覆盖 CSS 更干净，尤其多人协作时。
- 在引入 Bootstrap 前，重定义变量：
$table-striped-bg: #f0f8ff; - v5 中该变量只影响
table-striped，不影响table-hover或普通table - 注意编译后生成的选择器仍是
tbody tr:nth-of-type(odd)，所以语义和兼容性比手写更稳 - 如果项目没用 Sass，就别折腾变量——老老实实用
table-striped类，或者加一层 wrapper 类精准覆盖
真正容易被忽略的，是 tbody 是否存在。Bootstrap 表格建议显式写出 <tbody>，否则某些版本的 table-striped 在无 tbody 时会退化成全表着色或完全不生效。
