CSS 新增的 :nth-child(n of <selector>) 语法（含 :nth-last-child）可直接按视觉顺序筛选重排后的 Flex 子元素，无需 JavaScript 即可为“实际显示在最前/最后”的特定类元素（如 .item:not(.to-back) 或 .to-back）应用样式。
css 新增的 `:nth-child(n of
在 Flex 布局中，order 属性会改变子元素的视觉渲染顺序，但不会改变 DOM 结构顺序——这意味着传统伪类（如 :first-child、:last-child、:nth-of-type）仍基于原始 HTML 位置匹配，无法响应重排后的视觉流。过去这通常需借助 JavaScript 动态计算并添加 class，但现代 CSS 已提供原生解决方案：:nth-child(n of <selector>) 和 :nth-last-child(n of <selector>)（统称 “逻辑位置选择器”），它们依据最终渲染顺序中的匹配元素位置进行选择，完美适配 order 重排场景。
例如，要为所有 .item 中视觉上最后一个非 .to-back 元素移除右侧边框，同时为视觉上最后一个 .to-back 元素高亮边框，可直接使用：
/* 视觉上最后一个 .to-back 元素（无论其 DOM 位置） */
:nth-last-child(1 of .to-back) {
border-right-color: red;
}
/* 视觉上最后一个非 .to-back 的 .item 元素 */
.item:nth-last-child(1 of :not(.to-back)) {
border-right: none;
}注意：:nth-last-child(1 of ...) 等价于“最后一个匹配元素”，而 :nth-child(1 of ...) 则对应“第一个匹配元素”。上述规则作用于 .wrap 容器内所有子元素，因此需确保选择器足够精确（如 .item:nth-last-child(1 of :not(.to-back)) 明确限定为 .item 类型）。
完整示例：
<div class="wrap"> <div class="item">1</div> <div class="item to-back">2</div> <div class="item to-back">3</div> <div class="item to-back">4</div> <div class="item">5</div> <div class="item">6</div> </div>
.wrap { display: flex; gap: 0.5em; }
.item {
border: 2px solid lightblue;
padding: 0.5em;
min-width: 40px;
text-align: center;
}
.to-back { order: 2; background: #fff8dc; }
/* 视觉末位的 .to-back 元素 → 右侧变红 */
:nth-last-child(1 of .to-back) {
border-right-color: red;
}
/* 视觉末位的普通 .item（非 .to-back）→ 右侧无边框 */
.item:nth-last-child(1 of :not(.to-back)) {
border-right: none;
}✅ 关键注意事项：
- 此特性已获 Chrome 120+、Firefox 110+、Safari 17.4+ 原生支持（Edge 同 Chrome），旧版浏览器需降级方案（如 JS + getComputedStyle + order 计算）；
- of <selector> 中的 selector 必须是简单选择器组合（不支持复合伪类如 :hover），且不能包含关系符（如空格、>）；
- 若需同时处理“首个”和“末个”，建议成对使用 :nth-child(1 of ...) 与 :nth-last-child(1 of ...)，避免混淆逻辑；
- 对于复杂条件（如多类动态组合），优先用语义化 class 分组，再通过 of .class-a, .class-b 扩展匹配范围。
该方案将样式逻辑完全交由 CSS 引擎处理，既提升性能又增强可维护性，是现代 Flex 布局精细化控制的推荐实践。
