通过 css flexbox 的 `order` 属性，可无需 javascript 即实现将带 `.active` 类的 `

` 元素自动排至列表最前方，其余元素按原顺序跟随其后。

在传统文档流中，HTML 元素的渲染顺序严格遵循源码顺序，无法仅靠 CSS 改变 DOM 位置。但借助 Flexbox 布局，我们可以在视觉呈现层面重新排序子元素——这正是 order 属性的核心能力。

✅ 实现原理

将 <ul> 设为 flex 容器（display: flex; flex-direction: column），其所有 <li> 子项即成为 flex 项目。默认 order: 0，数值越小越靠前。因此只需：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

• 给所有 <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 依赖，性能高效，适合静态排序场景。

该方法简洁、可维护性强，是现代前端处理“动态视觉优先级”需求的标准实践之一。