如何精准定位 Flexbox 重排序后的首尾可见元素

CSS 新增的 :nth-child(n of <selector>) 和 :nth-last-child(n of <selector>) 伪类可直接匹配按视觉顺序排列的首个/末个指定元素，无需 JavaScript 即可实现对重排后首尾 .item 或 .item.to-back 的精确样式控制。

css 新增的 `:nth-child(n of )` 和 `:nth-last-child(n of )` 伪类可直接匹配按视觉顺序排列的首个/末个指定元素，无需 javascript 即可实现对重排后首尾 `.item` 或 `.item.to-back` 的精确样式控制。

在 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 即可优雅解决“重排后首尾样式定制”这一高频需求。