CSS 新增的 :nth-child(n of <selector>) 和 :nth-last-child(n of <selector>) 伪类可直接匹配按视觉顺序排列的首个/末个指定元素，无需 JavaScript 即可实现对重排后首尾 .item 或 .item.to-back 的精确样式控制。
css 新增的 `:nth-child(n of
在 Flexbox 中使用 order 属性动态调整子元素显示顺序时，DOM 结构顺序与视觉顺序发生分离——这导致传统 :first-child、:last-child 等伪类失效（它们仅基于 HTML 源序，而非渲染后顺序）。幸运的是，CSS Selectors Level 4 引入了 位置感知型选择器：nth-child() 和 nth-last-child() 支持 of <selector> 语法，能真正按最终布局顺序筛选元素。
✅ 正确做法是使用 :nth-last-child(1 of .to-back) 选择视觉上最后一个 .to-back 元素，用 .item:nth-last-child(1 of :not(.to-back)) 选择视觉上最后一个非 .to-back 的 .item 元素：
.flex {
display: flex;
gap: 0.5em; /* 推荐替代 margin/border 控制间距 */
}
.item {
border: 1px solid grey;
padding: 0.25em;
min-width: 40px;
}
.to-back {
order: 2;
}
/* 视觉上最后一个 .to-back 元素 —— 移除其右侧边框 */
:nth-last-child(1 of .to-back) {
border-right: none;
}
/* 视觉上最后一个普通 .item（即非 .to-back）—— 同样移除右侧边框 */
.item:nth-last-child(1 of :not(.to-back)) {
border-right: none;
}? 注意事项：
- :nth-last-child(1 of ...) 是关键——它表示“在满足条件的元素中，从视觉末尾数第 1 个”，等价于“最后一个符合条件的元素”。
- :not(.to-back) 必须包裹在 .item 选择器内（如 .item:nth-last-child(1 of :not(.to-back))），否则可能匹配到非 .item 元素（尽管本例中无此风险，但属良好实践）。
- 浏览器兼容性：Chrome 105+、Firefox 110+、Safari 16.4+ 已支持；旧版需降级方案（如 JS 动态添加 class）。
- 避免滥用 order：过度依赖 order 可能影响可访问性（屏幕阅读器仍按 DOM 顺序读取），建议仅用于纯视觉优化。
通过该方案，你无需监听重排、无需计算索引、无需操作 DOM，仅用纯 CSS 即可优雅解决“重排后首尾样式定制”这一高频需求。
