.table:nth-child(even) 无法生效，是因为该伪类作用于 .table 元素自身（作为其父容器的子元素），而非其内部的行；正确做法是为表格行添加统一父容器（如 .tbody），再对 .tr 应用 :nth-child(odd/even)。
`.table:nth-child(even)` 无法生效，是因为该伪类作用于 `.table` 元素自身（作为其父容器的子元素），而非其内部的行；正确做法是为表格行添加统一父容器（如 `.tbody`），再对 `.tr` 应用 `:nth-child(odd/even)`。
在使用语义化 HTML 表格（<table>、<code><tbody>、<code><tr>）时，<code>:nth-child(even) 可直接作用于 <tr> 实现隔行变色。但当采用 <code>div 构建自定义表格（即“CSS-only table”）时，选择器逻辑极易出错——根本原因在于 :nth-child() 的匹配对象是元素在其父容器中的位置序号，而非其在当前组件内的视觉层级。
例如，原始代码中：
.table:nth-child(even) { background-color: #ff9900; }
该规则实际查找的是：作为其直接父元素的第偶数个子元素、且 class 为 table 的 div。而 .table 很可能本身就是页面中唯一的顶级容器（即父元素下第一个子元素），此时 :nth-child(even) 永远不匹配，甚至因权重或继承导致意外样式污染。
✅ 正确解法：引入语义清晰的结构层级
为所有数据行（.tr）包裹一个专用容器（如 .tbody），确保 .tr 是该容器的直系子元素，再对 .tr 应用伪类：
/* ✅ 正确：对 tbody 下的 tr 进行隔行着色 */
.table .tbody .tr:nth-child(even) {
background-color: #ff9900;
}
.table .tbody .tr:nth-child(odd) {
background-color: #55e3d6;
}
对应 HTML 结构需同步更新：
<div class="table">
<div class="thead">...</div>
<!-- ✅ 新增 tbody 容器，使所有 tr 成为其直接子元素 -->
<div class="tbody">
<div class="tr">...</div>
<div class="tr">...</div>
<div class="tr">...</div>
<div class="tr">...</div>
</div>
</div>
⚠️ 注意事项：
- 不要滥用
!important：它会破坏 CSS 层叠逻辑，仅在调试或覆盖第三方样式时临时使用； - 避免混淆
:nth-child与:nth-of-type：前者按 DOM 顺序计数（含所有兄弟元素），后者仅计同类型标签（如仅<div>），在混合标签场景中行为不同；<li>若 <code>.thead也属于.tbody的同级兄弟（如未包裹），则.tr:nth-child(1)实际指向的是.thead—— 因此必须确保.tbody仅包含.tr元素； - 推荐为
.tbody添加display: block（若 flex/grid 布局异常），并确保.tr的flex行为不受父容器影响。
通过规范 DOM 结构 + 精准定位目标元素，:nth-child() 才能真正发挥“隔行染色”的预期效果，兼顾可维护性与浏览器兼容性（支持 IE9+）。
