bootstrap 3 的 .table-striped 通过 tbody > tr:nth-child(odd) 为奇数行的 td/th 设置背景色实现斑马纹，要求表格必须包含 ，且样式作用于单元格而非 tr；ie8 不支持需 js 模拟；与 .table-hover 共存时 hover 会覆盖条纹色。
Bootstrap 3 默认的 .table-striped 是怎么工作的
Bootstrap 3 的斑马纹不是靠 CSS 选择器如 :nth-child 动态计算，而是依赖于在 <tbody> 内部为偶数行（即第2、4、6…行）显式添加 <code>.active 类 —— 这其实是早期 Bootstrap 的实现方式，但容易被误解。实际上，.table-striped 真正生效靠的是：tbody > tr:nth-child(odd) 选择器（注意是 odd，不是 even），给奇数行（视觉上第1、3、5…行）加背景色，而默认表行背景是透明/白色，所以看起来是“隔行变色”。
关键点：必须确保表格有 <tbody> 包裹内容行，否则 <code>:nth-child 会失效；且不能把 <tr> 直接写在 <code><table> 下（省略 <code><tbody>）。
<ul>
<li>✅ 正确结构：<code><table class="table table-striped">
<thead>...</thead>
<tbody><tr>...</tr></tbody>
</table>
<table><tr>...</tr></table>（无 <tbody>，斑马纹不显示）
<li>⚠️ 注意：<code>.table-striped 只作用于 <tbody> 内的 <code><tr>，<code><thead> 和 <code><tfoot> 不参与条纹计算
<h3>自定义斑马纹颜色时为什么 <code>background-color 覆盖不了
直接在 tr:nth-child(odd) 上写 background-color 很可能无效，因为 Bootstrap 3 的默认样式带 !important（见源码中 .table-striped > tbody > tr:nth-child(odd) > td 和 > th 规则）。它给的是 <td>/<code><th> 的背景，而不是 <code><tr>。
<p>所以你要覆盖，得匹配相同的层级和选择器权重，或提高优先级：</p>
<ul>
<li>✅ 推荐：重写 <code>tbody > tr:nth-child(odd) > td, tbody > tr:nth-child(odd) > th，并加 !important（因原样式用了）
.my-table.table-striped tbody > tr:nth-child(odd) > td
tr:nth-child(odd) { background: #f0f0f0; } —— 它不匹配 td/th，且权重不够.my-table.table-striped tbody > tr:nth-child(odd) > td,
.my-table.table-striped tbody > tr:nth-child(odd) > th {
background-color: #f8f9fa !important;
}
IE8–9 下 :nth-child 不支持怎么办
Bootstrap 3 官方已放弃 IE8 支持（文档明确要求 IE9+），但如果你项目仍需兼容 IE8，:nth-child 会完全失效，斑马纹不出现。
此时不能靠 CSS 修复，必须用 JS 补充逻辑，或者改用其他方案：
- ✅ 最小改动：用 jQuery 在 DOM ready 后手动给奇数
<tr> 加类，例如：<code>$('table.table-striped tbody tr:nth-child(odd)').addClass('striped');，再配 CSS.striped td, .striped th { background: #f9f9f9; } - ✅ 替代方案：放弃动态条纹，改用固定行高 + 边框分隔（如
border-bottom: 1px solid #eee;），视觉上也能提升可读性 - ⚠️ 注意：不要试图用 IE 条件注释加载 polyfill，
:nth-child在 IE8 下无可靠 CSS fallback - ✅ 正常表现：鼠标悬停时，当前行背景覆盖条纹色，移开后恢复条纹
- ⚠️ 坑：如果你自定义了 hover 背景为半透明（如
rgba(0,0,0,0.05)），而条纹色又很浅，可能造成颜色混合、对比度不足 - ✅ 解决：统一控制 hover 和条纹的明暗关系，例如让条纹色稍深（
#f5f5f5），hover 色稍亮（#fff），避免灰蒙蒙
与其他表格类（如 .table-hover）共存时的顺序问题
.table-striped 和 .table-hover 可以同时使用，但它们的样式规则有叠加关系：hover 状态会覆盖斑马纹背景（因为 :hover 的选择器权重更高），这是预期行为。
但要注意冲突点：
另外，.table-bordered 不影响条纹逻辑，但边框会强化行间分隔，有时反而让斑马纹显得多余 —— 这属于设计取舍，不是技术问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
