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"> → 条纹不会出现 <li>正确写法：<code><table class="table table-striped"><li>如果用了 <code>table-dark，记得同时加table：<table class="table table-dark table-striped"><li>动态渲染表格（如 Vue 的 <code>v-for）时，确认<tbody> 标签没被漏掉——<code>table-striped只作用于<tbody> 内的 <code><tr> <h3>改颜色别碰 <code>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></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;"></ul>
CSS：.list-group-zebra .list-group-item:nth-of-type(odd) { background-color: rgba(0, 0, 0, var(--zebra-alpha)); }
真正容易翻车的地方不在怎么加样式，而在加完之后没验证 DOM 结构是否符合预期——特别是
<tbody> 是否完整包裹数据行、<code><list-group-item></list-group-item>是否都是<list-group></list-group>的直接子元素。这些结构问题会让所有 CSS 规则失效，但错误现象看起来却像“样式没生效”。 - 全局修改：在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
