table-striped必须与table类共用才生效，因Bootstrap条纹依赖.table-striped > tbody > tr:nth-of-type(odd)选择器，仅当table类存在时该CSS规则才被加载；缺table类、漏tbody或误用nth-child均会导致失效。
table-striped 必须和 table 类一起用，否则完全不生效——这是最常被忽略的前提。
为什么加了 table-striped 却没条纹？
根本原因几乎总是：table 类缺失。Bootstrap 的条纹样式依赖选择器 .table-striped > tbody > tr:nth-of-type(odd)，而该规则只在 .table 存在时才被 Bootstrap CSS 正确加载（它和 .table-striped 是成对启用的逻辑）。
- 错误写法：
<table class="table-striped">→ 条纹不会出现 - 正确写法：
<table class="table table-striped"> - 如果用了
table-dark，记得同时加table：<table class="table table-dark table-striped"> - 动态渲染表格（如 Vue 的
v-for）时，确认<tbody>标签没被漏掉——table-striped只作用于<tbody>内的<tr>
改颜色别碰 nth-child，优先覆盖 CSS 变量
Bootstrap 5 用 CSS 变量控制斑马纹底色：--bs-table-accent-bg（浅色主题）和 --bs-table-dark-accent-bg（深色主题）。直接覆盖变量比手写高权重规则更干净、可维护性更强。
- 全局修改：在
:root或主样式文件里加:root { --bs-table-accent-bg: #f8f9ff; --bs-table-dark-accent-bg: #343a40; } - 局部修改：给表格加自定义类，比如
class="table table-striped my-table-striped"，再写.my-table-striped > tbody > tr:nth-of-type(odd) { background-color: #f0f5ff; } - 绝对不要写
tr:nth-child(odd)—— 遇到<caption>、注释节点或服务端插入的空行就会错位；nth-of-type才是稳定解 - 如果用了
table-hover，悬停时会覆盖奇数行背景——这是预期行为；若要 hover 下也保持条纹感，得额外加规则：.table-hover tbody tr:hover:nth-of-type(odd) { background-color: #e6f0ff; }
list-group-striped 在 Bootstrap 5 中已移除，得手动补
列表项没有内置斑马纹支持了。不能只加 list-group-striped 类，必须自己写 CSS 规则，且推荐用 nth-of-type 而非 nth-child。
立即学习“前端免费学习笔记（深入）”；
- 手动加斑马纹：
.list-group-striped .list-group-item:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); } - 如果插了
.list-group-divider或.list-group-item.disabled，它们仍参与nth-of-type计数——视觉节奏可能因此偏移，这点容易被忽略 - 想用 JS 控制开关？更轻量的做法是用 CSS 自定义属性：
HTML：<ul class="list-group list-group-zebra" style="--zebra-alpha: 0.05;">
CSS：.list-group-zebra .list-group-item:nth-of-type(odd) { background-color: rgba(0, 0, 0, var(--zebra-alpha)); }
真正容易翻车的地方不在怎么加样式，而在加完之后没验证 DOM 结构是否符合预期——特别是 <tbody> 是否完整包裹数据行、<list-group-item> 是否都是 <list-group> 的直接子元素。这些结构问题会让所有 CSS 规则失效，但错误现象看起来却像“样式没生效”。
