错误，table-striped 必须与 table 类共存才生效，因 Bootstrap 条纹样式依赖 .table-striped > tbody > tr:nth-of-type(odd) 选择器，仅当 table 类存在时 CSS 才被正确加载。
table-striped 类必须和 table 基础类一起用，单独加无效——这是最常被忽略的前提。
为什么加了 table-striped 却没效果？
根本原因通常是缺了 table 类。Bootstrap 的条纹样式依赖于预设的层级选择器：.table-striped > tbody > tr:nth-of-type(odd)，这个规则只在 table 类存在时才被 Bootstrap CSS 正确加载和启用。
- 只写
<table class="table-striped">→ 条纹不生效 - 正确写法是
<table class="table table-striped"> - 如果用了
table-dark，条纹色会自动适配为深色系（$table-striped-bg在暗主题下取反色） - 检查是否误删或覆盖了 Bootstrap CSS 文件——条纹纯靠 CSS 实现，不依赖 JS
table-striped 作用范围有哪些限制？
它只对 <tbody> 内的 <tr> 生效，且默认选中奇数行（nth-of-type(odd)），不是 nth-child(odd)。
-
<thead>、<tfoot>、<caption>完全不受影响，这是设计行为，不是 bug - 如果
<tbody>里混有注释节点或条件渲染的空<tr>，nth-of-type比nth-child更稳定 - 响应式容器
table-responsive是外层<div>，不影响内部伪类匹配逻辑 - IE8 及更早版本不支持
:nth-of-type，此时条纹完全不显示（已属历史兼容问题）
想改斑马纹颜色，该动哪？
优先改 Sass 变量 $table-striped-bg，而不是手写覆盖 CSS——尤其在团队项目或长期维护场景下。
- 如果你用的是编译版 Bootstrap（如 CDN 引入），直接加一条高优先级规则：
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f0f8ff !important; } - 避免写
tr:nth-child(odd)：容易因 DOM 结构变化（比如插了<caption>或服务端注入注释）错位 - 别在
<tr>上设height：会破坏vertical-align和行高继承，导致文字贴顶或截断 - 移动端小屏下若启用了
table-sm+ 自定义字体大小，条纹可能视觉上“变窄”或被挤压，需同步调padding
真正容易翻车的地方不在怎么加，而在加完之后没验证 <tbody> 是否真的包裹了所有数据行——动态渲染表格时，v-for 或 map 漏掉 <tbody> 标签，条纹就彻底失效。
