order属性仅对grid或flex容器的直接子项生效，父容器必须设置display: grid（或inline-grid），否则无效；其值默认为0，数值越小越靠前，负数合法；order相同时按html源顺序排列；它改变视觉及可访问性顺序，影响tab键焦点和屏幕阅读器朗读；不支持css过渡，动画需用transform模拟。
order属性只对grid子项生效，父容器必须设为display: grid
很多人给子元素加了 order 却没效果，根本原因是父容器没启用 Grid 布局。CSS 的 order 属性不是全局排序工具，它只在 Flex 或 Grid 容器的直接子项上起作用，且 Grid 中优先级高于源顺序。
- 必须给父容器设置
display: grid（或display: inline-grid），仅设grid-template-columns不够 - 子项的
order值默认是 0；数值越小越靠前，负数也合法（如order: -1） - 多个子项
order相同时，按 HTML 源顺序排列，不会随机或按字母序 - 别在非 Grid/Flex 容器里试
order——它完全被忽略，控制台也不会报错
动态排序要配合JS修改order值，不能只靠CSS类切换
单纯写一堆预设的 CSS 类（比如 .first{ order: -1; }）在真实交互中容易失控：类名叠加、优先级冲突、响应不及时。真正可控的动态排序，得由 JS 主动设置 style.order。
- 用
element.style.order = "2"直接赋值最可靠；字符串或数字都行，但建议统一用字符串避免隐式转换问题 - 避免用
classList.toggle()切换排序类——一旦多个排序逻辑共存（比如“按时间”+“置顶”），类名会打架 - 批量重排时，别用
forEach+ 异步更新；先算好所有order值，再一次性写入 DOM，减少重排次数 - 注意 SSR 场景：服务端渲染时
style.order不生效，需在客户端首次 hydration 后补设
order会影响可访问性顺序，屏幕阅读器会跟随视觉顺序
这是最容易被忽略的副作用：order 改变的不仅是视觉位置，还会改变浏览器的 tab 键焦点顺序和屏幕阅读器的朗读顺序。如果只是想“看起来换位置”，但希望键盘用户仍按原始结构操作，order 就不合适。
- 检查方式：用键盘 Tab 导航，看焦点是否跳到你意料之外的位置
- 替代方案：用
grid-row/grid-column显式定位，不改变源顺序，可访问性不受影响 - 如果必须用
order，记得同步调整aria-flowto或重构语义结构，否则 WCAG 会失败 - Chrome DevTools 的 “Accessibility” 面板能直观显示当前的可访问性顺序，比肉眼判断更准
order不触发重排（reflow），但可能引发重绘（repaint）和合成层变化
order 属于“compositing 属性”，浏览器通常不需要重新计算布局，所以性能开销小。但它仍可能触发图层重组，尤其在有 transform 或 opacity 的兄弟元素存在时。
立即学习“前端免费学习笔记（深入）”；
- 高频排序（如每秒多次）下，观察 Performance 面板里的 “Layout” 是否为 0；如果不是，说明其他样式正在拖累它
- 避免给同一个元素同时设置
order和position: absolute——后者会让order失效 - 动画
order值本身无效（不支持过渡），如需平滑移动，改用transform: translate()模拟，再用 JS 同步更新order - 旧版 Safari（order 在 Grid 中的支持有 bug，建议加
@supports (order: 1)条件检测
