order属性仅在Flex或Grid容器中生效，父元素须设display:flex/grid；值为排序权重，越小越靠前，默认0；Grid中grid-area等定位声明会覆盖order的视觉效果；它不改变DOM顺序、焦点顺序及SEO权重。
order 属性为什么没生效
常见现象是写了 order 却完全看不出顺序变化，元素还是按 HTML 顺序排列——根本原因是 order 只在 Flex 或 Grid 容器中起作用，且父容器必须显式启用布局模式。
- 父元素没设
display: flex或display: grid，order直接被忽略（连计算值都为0） - 父元素用了
display: inline-flex，但子元素是块级或有vertical-align干扰，可能造成视觉错位，误以为排序失效 - 多个子元素
order值相同时，回退到 HTML 源顺序，不是“随机”，但容易被当成“没生效”
Flex 中 order 值的比较规则
order 不是索引，而是排序权重：数值越小越靠前，负数合法，支持小数（如 order: -1.5），但浏览器只按数字大小比较，不区分整数/浮点。
- 默认值是
0，不是1；没写order的元素等价于order: 0 -
order: -99和order: 99都有效，但极端值对可维护性不利，建议控制在-5到5范围内 - 如果用 JS 动态设置，注意 CSSOM 中读取的是计算值（
getComputedStyle(el).order返回字符串如"2"），不能直接参与数值运算
Grid 里 order 和 grid-area 的优先级冲突
在 Grid 布局中，order 仅影响文档流顺序（比如屏幕阅读器、Tab 键焦点），但不改变网格轨道分配——grid-row/grid-column 或 grid-area 的声明会完全覆盖 order 的视觉位置。
- 写了
grid-column: 2又写order: -1，元素仍显示在第 2 列，order不会把它“挤”到第 1 列 - 想纯靠
order排序，就得避免任何显式的网格定位声明，否则就变成两个独立控制维度，容易互相打架 - 响应式场景下，不同断点设置不同
grid-template-areas时，order基本无效，此时应改用grid-template-areas本身来重组结构
无障碍和 SEO 的隐含代价
order 改变的是视觉渲染顺序，但 DOM 结构、源码顺序、焦点顺序（除非配合 tabindex）、屏幕阅读器朗读顺序默认仍按 HTML 顺序——这既是特性，也是坑。
立即学习“前端免费学习笔记（深入）”；
- 用
order把操作按钮提到标题前面，键盘用户 Tab 时仍先聚焦标题，体验割裂 - 搜索引擎爬虫不解析 CSS，所以
order不影响 SEO 权重分配，但内容逻辑错位可能间接影响语义理解 - 真要兼顾视觉与语义顺序，要么重构 HTML，要么用
aria-order（不被广泛支持）或tabindex手动调序，后者需额外处理焦点管理
order 当成万能重排工具，却忘了它只管“看起来怎么排”，不管“逻辑上怎么走”。一旦涉及键盘导航、自动化测试或 SSR 渲染，这个 gap 就立刻暴露。 
