本文介绍一种不依赖 JavaScript 或框架的纯 CSS 解决方案：利用 display: flex + order + :has() 伪类，让被选中的复选框所在标签自动移至列表顶部，避免状态错乱与逻辑耦合。

本文介绍一种不依赖 javascript 或框架的纯 css 解决方案：利用 `display: flex` + `order` + `:has()` 伪类，让被选中的复选框所在标签自动移至列表顶部，避免状态错乱与逻辑耦合。

在前端开发中，常需实现“点击复选框后，其所属项置顶显示”的交互效果。传统做法（如 Svelte 示例中）往往通过 JS 手动操作数组顺序并更新状态，但容易引发副作用——例如本例中，移动元素时未隔离 DOM 渲染与数据状态，导致相邻项意外被勾选。更优解是将排序逻辑交由 CSS 天然能力处理，彻底解耦行为与样式。

核心原理非常简洁：

• 对每组
  容器启用 display: flex; flex-direction: column；
• 使用 label:has(input:checked) 选择器精准定位“包含已勾选复选框的 label”；
• 为其设置 order: -9999（负值越小，层级越靠前），强制其在 flex 排序中优先渲染。

以下为可直接运行的最小化示例：


OpenJDK 24
下载

<style>
  div {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }
  label:has(input:checked) {
    order: -9999;
    font-weight: bold;
    background-color: #f0f8ff;
  }
</style><h3>GroupA</h3>
<div>
  <label><input type="checkbox"> Item A1</label>
  <label><input type="checkbox"> Item A2</label>
  <label><input type="checkbox"> Item A3</label>
</div>

<h3>GroupB</h3>
<div>
  <label><input type="checkbox"> Item B1</label>
  <label><input type="checkbox"> Item B2</label>
  <label><input type="checkbox"> Item B3</label>
</div>

✅ 优势总结：

• 零 JS 干预：无状态管理、无数组重排、无事件监听，杜绝因数据同步导致的勾选错位；
• 响应式天然支持：order 属于 CSS 布局层，浏览器自动重排，性能高效；
• 语义清晰：label:has(input:checked) 明确表达“当复选框被选中时作用于其父标签”，符合可访问性规范。

⚠️ 注意事项：

• :has() 在 Safari 15.4+、Chrome 105+、Firefox 103+ 中已稳定支持，若需兼容旧版浏览器（如 IE），需回退至 JS 方案；
• order 仅对 flex 或 grid 容器子元素生效，务必确保 label 的直系父容器设置了 display: flex；
• 避免对 input 自身设置 order（它不是 flex 项目），必须作用于包裹它的 label。

该方案不仅解决了原始问题中的“误勾选”缺陷，更体现了现代 CSS 的强大表达力——把 UI 行为逻辑从 JavaScript 迁移到样式层，是提升代码健壮性与可维护性的关键实践。