不能用 list__item--odd 这类修饰符，因为交替色由 dom 顺序决定而非业务状态，手动打标易错且破坏声明式原则；应优先用 .list__item:nth-child(odd) 实现，配合 css 变量支持暗色模式与 fallback。
直接用 :nth-child 配合 BEM 块名写样式，别把交替色塞进修饰符里——它不是组件状态，而是结构规律。
为什么不能用 list__item--odd 这类修饰符
交替色由 DOM 顺序决定，不是业务状态。加 --odd 类意味着 JS 要遍历所有 li 手动标记，既冗余又易错；一旦动态插入或删除项，序号就断掉，还得同步更新 class。BEM 修饰符该管的是「可交互状态」（如 list__item--selected）或「语义变体」（如 list__item--divider），不是位置索引。
- JS 主动打标违背声明式原则，增加维护成本
-
list__item--odd和list__item--even本质是互斥且完全由位置推导的，不该暴露为可控 API - 与
:nth-child并存时，CSS 优先级容易打架，调试困难
list__item 怎么安全绑定 :nth-child
必须带块级前缀限定作用域，避免全局污染或被其他样式覆盖。优先用 :nth-child，不是 :nth-of-type——只要列表结构是纯 li，它更稳定；若混入分隔线、标题等非 li 元素，再退到 :nth-of-type。
- 推荐写法：
.list__item:nth-child(odd) { background-color: var(--list-bg-odd, #f9f9f9); } - 务必写全路径：
.list__item，而不是单独li，否则可能误中第三方组件里的li - fallback 不可省：
var(--list-bg-odd, #f9f9f9)，防止变量未定义时背景透明
暗色模式下交替色对比度不足怎么办
别在 @media (prefers-color-scheme: dark) 里重写整套 :nth-child 规则——重复、难维护。统一靠 CSS 变量切换，让伪类逻辑不动，只换颜色值。
- 在
:root定义亮/暗两套变量：--list-bg-odd和--list-bg-even - 暗色模式下只需重设变量：
html[data-theme="dark"] { --list-bg-odd: #2d2d2d; --list-bg-even: #3a3a3a; } - 文字颜色也要同步调：
.list__item { color: var(--list-text, #333); }，避免浅灰文字配浅灰背景 - 打印样式需显式重置：
@media print { .list__item { background-color: transparent !important; } }
悬停、选中、禁用状态怎么叠加交替色
交替色是底层基底，其他状态是覆盖层。:hover、:checked 等必须显式声明，否则会被交替背景盖住。
.list__item:hover { background-color: var(--list-bg-hover, #eef7ff; } /* 覆盖交替色 */- 多选场景下，
.list__item input[type="checkbox"]:checked + .list__item这类兄弟选择器要确保 z-index 或背景足够强 - 禁用态建议用 opacity 或 filter，而非仅改背景色，否则视觉层次混乱
真正麻烦的不是怎么写交替色，而是当列表项高度差异大、或嵌套了复杂子内容时，人眼对“交替”的感知会偏移——这时别强行调样式，接受 DOM 序号即真理。视觉节奏靠 padding、border、字体粗细来辅助，不是靠背景色硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
