应避免用 tbody tr:nth-child(odd) 实现斑马纹，因其依赖 DOM 位置易受动态操作影响；正确做法是 JS/模板层渲染时添加 --odd/--even Modifier 类，使样式与逻辑序号绑定，并统一用 BEM 类控制 hover 状态。
斑马纹别用 nth-child 直接套 tbody tr
动态表格里，tbody tr:nth-child(odd) 看似简洁，但一旦插入、删除、排序或分页，行序重排，奇偶状态就错乱——nth-child 数的是 DOM 位置，不是逻辑序号。BEM 要求状态可控，所以得把斑马纹“固化”到行元素上。
正确做法是让 JS 或模板层在渲染时主动加 Modifier 类：
-
user-list-table__row--odd和user-list-table__row--even由数据层决定，与 DOM 顺序解耦 - 样式只写
.user-list-table__row--odd { background-color: #f9f9f9; }，不依赖结构伪类 - 如果必须用纯 CSS（如静态表格），可用
tbody > .user-list-table__row:nth-of-type(2n)，比nth-child更抗干扰，因它只数同类元素
悬浮态必须绑定到 BEM 元素，而非原生标签
很多人保留 tr:hover 规则，同时又给 tr 加了 user-list-table__row 类，结果 hover 效果被 BEM 的背景色覆盖，或者优先级打架。BEM 要求交互样式也走类名流。
实操要点：
- 删掉所有
tr:hover、td:hover这类原生标签 hover 规则 - 统一用
.user-list-table__row:hover .user-list-table__cell控制悬停区域背景 - 若需高亮整行且避免文字闪烁，hover 作用于
.user-list-table__row，再通过background-color填充子.user-list-table__cell，而不是靠继承 - 注意：不要写
.user-list-table__row:hover .user-list-table__cell--status这种过深选择器，易被其他 Modifier 覆盖；建议 hover 样式设在 cell 层级，用.user-list-table__cell:hover或.user-list-table__row:hover .user-list-table__cell
BEM 斑马纹 + 悬浮的组合样式怎么写才不冲突
当 --odd、--even 和 :hover 同时存在，CSS 特异性容易失控。关键不是堆权重，而是设计层级关系。
推荐写法：
- 基础色用 Modifier：
.user-list-table__row--odd { background-color: #fafafa; } - 悬停覆盖用伪类 + 元素：
.user-list-table__row:hover { background-color: #eef7ff !important; }—— 这里!important是合理场景，因为 hover 是瞬时态，应强于静态状态类 - 若不想用
!important，改用更具体的选择器：.user-list-table__row:hover .user-list-table__cell设置背景，而 Modifier 只作用于.user-list-table__row本身（透明底），把颜色控制权交给 cell 层 - 禁止写
.user-list-table__row--odd:hover，Modifier 和伪类混用会放大维护成本，且无法表达“悬停时忽略奇偶”这一语义
为什么不能一边用 BEM 类，一边还留着 tr:hover？
这不是风格问题，是样式失控的起点。原生标签选择器（如 tr、td）和 BEM 类共存时，浏览器按特异性规则计算样式优先级，而 tr:hover 的权重（0,0,1,1）往往低于 .user-list-table__row:hover（0,1,1,0），但又高于 .user-list-table__row--odd（0,1,0,1）。这种交错优先级会让开发者反复调 !important 或加冗余选择器。
真正省事的做法只有一条：原生标签只管语义，BEM 类全量接管样式。包括重置：
tr, td, th { background: transparent; border: none; padding: 0; }- 所有背景、边框、内边距、对齐、悬停，全部走
.user-list-table__xxx类 - 哪怕只是临时调试，也别在 DevTools 里手动改
tr:hover——那是在绕开 BEM 约束，下次重构时必然遗漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
