首页 > 文章 > 前端

如何将带有 active 类的列表项置顶显示

时间：2026-02-06 13:18:14 452浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何将带有 active 类的列表项置顶显示》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

通过 CSS Flexbox 的 `order` 属性，可无需 JavaScript 即实现将带 `.active` 类的 `

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

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

✅ 实现原理

将

子项即成为 flex 项目。默认 order: 0，数值越小越靠前。因此只需：
- 给所有
- 设置 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 无影响）；
- 必须为父容器（
  - 若需兼容 IE10+，order 属性支持良好，但需注意旧版 Safari 可能需要 -webkit-order 前缀（现代项目通常无需）；
  - 此方案纯 CSS 实现，零 JS 依赖，性能高效，适合静态排序场景。
该方法简洁、可维护性强，是现代前端处理“动态视觉优先级”需求的标准实践之一。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

前往漫画官网入口并下载 ➜

如何将带有 active 类的列表项置顶显示

✅ 实现原理

? 完整示例代码