纯CSS无法真正排序DOM，仅能通过:hover的transform/z-index等制造视觉上浮效果；需ul设position:relative以建立层叠上下文；移动端:hover基本失效，应降级为tap加class；避免用top/width触发重排，优先用transform/opacity。
列表项 hover 时如何触发视觉排序（伪排序）
纯 CSS 无法真正改变 DOM 顺序或执行 JavaScript 式的数组排序，但可以通过 :hover 配合 transform、z-index 或 opacity 等属性，制造“被悬停项上浮/放大/前置”的视觉排序效果。关键不是重排，而是引导视觉焦点。
常见错误是直接对 li 使用 position: relative + z-index，却忘了父容器需设 position: relative 以形成层叠上下文；否则 z-index 不生效。
- 给
ul添加position: relative - 给
li设position: relative和默认z-index: 1 - 在
li:hover中设z-index: 10+transform: scale(1.05)（可选） - 加
transition: all 0.2s ease让变化平滑
active 状态下如何强化“被选中”反馈（非表单场景）
:active 在鼠标按下瞬间触发，持续时间极短，常被忽略。若想让点击后保持高亮（模拟选中），不能只靠 :active —— 它无法持久。必须配合 JavaScript 切换 class，或改用 :focus-within + tabindex 实现键盘可访问的临时聚焦态。
真实可用方案：
立即学习“前端免费学习笔记（深入）”；
- 给
li加tabindex="0"，再写li:focus样式（支持键盘 tab 导航） - 用
li:active做“按下凹陷”效果：比如transform: translateY(2px)+background-color: #e0e0e0 - 避免仅依赖
:active实现功能态，它不适用于触屏长按或点击后状态维持
为什么 hover 排序在移动端基本失效
移动设备无稳定 hover 状态，:hover 通常只在点击后短暂触发（Safari 尤其明显），甚至被完全忽略。试图用 @media (hover: hover) 检测支持性，也不能解决交互逻辑断层问题。
