纯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) 检测支持性，也不能解决交互逻辑断层问题。
兼容做法：
- 用
@media (hover: none)关闭 hover 动效，避免意外触发 - 将核心交互降级为 tap 后添加 class（如
li.tapped），CSS 控制该 class 的样式 - 放弃“悬停即排序”的设计，改用显式操作按钮（如“置顶”图标）+ JS 实现真实 DOM 移动
性能陷阱：别在 hover 中触发 layout 或 paint 重排
用 top/left 或 width/height 做 hover 动画会强制浏览器重排（reflow），卡顿明显。尤其列表项多时，滚动和悬停会互相拖慢。
安全替代：
- 只用
transform（如translateY、scale）和opacity—— 它们走合成层，不触发重排 - 确保
li有will-change: transform（慎用，仅对高频动画项） - 避免在
ul:hover li这类祖先悬停选择器里批量修改子项样式，会造成大量样式计算
真正需要排序逻辑时，CSS 只能做视觉暗示；数据重排必须交由 JavaScript 处理 DOM 或虚拟列表渲染。hover 和 active 是信号，不是排序引擎。
