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

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 即可优雅解决“重排后首尾样式定制”这一常见需求。实际效果表明，它使代码更简洁，维护成本也更低。