通过 css flexbox 的 `order` 属性，可无需 javascript 即实现将带 `.active` 类的 `
在传统文档流中，HTML 元素的渲染顺序严格遵循源码顺序，无法仅靠 CSS 改变 DOM 位置。但借助 Flexbox 布局，我们可以在视觉呈现层面重新排序子元素——这正是 order 属性的核心能力。
✅ 实现原理
将 <ul> 设为 flex 容器（display: flex; flex-direction: column），其所有 <li> 子项即成为 flex 项目。默认 order: 0，数值越小越靠前。因此只需：
- 给所有 <li> 设置 order: 1（统一后置）；
- 给 .slide.active 单独设置 order: 0（优先级更高，视觉上置顶）。
? 完整示例代码
.sliderscroll {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
}
.sliderscroll li {
order: 1; /* 默认置于后续位置 */
padding: 8px 12px;
margin: 4px 0;
background: #f9f9f9;
border-radius: 4px;
}
.sliderscroll li.slide.active {
color: #d32f2f;
font-weight: bold;
order: 0; /* 关键：置顶显示 */
background: #ffebee;
}<ul class="sliderscroll"> <li class="slide">List A</li> <li class="slide">List B</li> <li class="slide">List C</li> <li class="slide active">List D</li> <li class="slide">List E</li> <li class="slide active">List F</li> </ul>
⚠️ 注意事项： order 仅影响视觉顺序，不改变 DOM 结构或语义顺序（对屏幕阅读器、SEO 无影响）； 必须为父容器（<ul>）显式声明 display: flex，且 flex-direction: column 保证垂直排列； 若需兼容 IE10+，order 属性支持良好，但需注意旧版 Safari 可能需要 -webkit-order 前缀（现代项目通常无需）； 此方案纯 CSS 实现，零 JS 依赖，性能高效，适合静态排序场景。
该方法简洁、可维护性强，是现代前端处理“动态视觉优先级”需求的标准实践之一。
