CSS 新增的:nth-child(n of和) :nth-last-child(n of伪类能够直接匹配视觉顺序上的首个或末个指定元素，无需 JavaScript 即可精确定位 Flexbox 重排后的首尾) .item或.item.to-back元素，实现精确的样式控制。
首先明确一个核心问题：在 Flexbox 中使用 order 属性调整子元素显示顺序时，DOM 结构顺序与视觉顺序不一致——这导致传统的 :first-child、:last-child 选择器失效，因为它们只遵循 HTML 源顺序，无法识别渲染后的布局。好消息是，CSS Selectors Level 4 引入了真正基于最终布局顺序的选择器：:nth-child() 和 :nth-last-child() 现在支持 of 语法，可以精准匹配视觉顺序上的目标元素。
那么，具体怎么用？
要选中视觉上最后一个 .to-back 元素，可以使用 :nth-last-child(1 of .to-back)；而要选中视觉上最后一个非 .to-back 的 .item 元素，则使用 .item:nth-last-child(1 of :not(.to-back))。关键在于 :nth-last-child(1 of ...) 这个写法——它表示“在符合条件的元素中，从视觉末尾数第一个”，即“最后一个符合条件的元素”。
.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 ...)是核心语法，其含义是“从视觉末尾数第一个”，即“最后一个匹配条件的元素”。:not(.to-back)必须嵌套在.item选择器内（如.item:nth-last-child(1 of :not(.to-back))），否则可能误选非.item元素——尽管本例中风险较小，但这是一个良好的编码习惯。- 浏览器兼容性方面：Chrome 105+、Firefox 110+、Safari 16.4+ 已支持此特性；旧版浏览器需要降级方案，例如通过 JavaScript 动态添加类名。
- 避免过度依赖
order：它可能影响可访问性，因为屏幕阅读器仍会按 DOM 顺序读取内容。建议仅在纯视觉优化场景中使用。
此方案的优势在于，无需监听重排、计算索引或操作 DOM，纯 CSS 即可优雅解决“重排后首尾样式定制”这一常见需求。实际效果表明，它使代码更简洁，维护成本也更低。
