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