如何用纯CSS仅反转指定div的部分子元素顺序？

需求分析 #

需要将#parent下的直接<a>子元素（A、B、C、D）反转显示为D、C、B、A，同时保持#sub-child内的元素（X、Y、Z）顺序不变，避免整体反转所有子元素。

解决方案：使用Flex布局的order属性 #

通过给#parent设置Flex布局，单独控制每个直接子元素的order值，实现精准排序：

原HTML结构

<div id="parent">
    <a>A</a>
    <a>B</a>
    <a>C</a>
    <a>D</a>
    <div id="sub-child">
        <a>X</a>
        <a>Y</a>
        <a>Z</a>
   </div>
</div>

实现CSS

#parent {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
}

/* 反转直接<a>子元素的顺序 */
#parent > a:nth-child(1) { order: 4; } /* A排第4位 */
#parent > a:nth-child(2) { order: 3; } /* B排第3位 */
#parent > a:nth-child(3) { order: 2; } /* C排第2位 */
#parent > a:nth-child(4) { order: 1; } /* D排第1位 */

/* 让sub-child排在最后 */
#parent > #sub-child { order: 5; }

效果说明 #

• #parent设置为flex-direction: column后，子元素默认按HTML顺序垂直排列
• 通过给每个直接<a>子元素设置递减的order值，实现反转效果
• #sub-child的order值设为最大，确保它排在所有反转后的<a>元素之后

扩展方案（适用于数量较多的子元素） #

如果#parent下的直接<a>数量较多，可以结合CSS变量和calc简化代码（需注意浏览器兼容性）：

#parent {
    display: flex;
    flex-direction: column;
}

#parent > a {
    /* 假设有4个直接<a>子元素，计算order值：总数量+1 - 索引 */
    order: calc(5 - var(--index));
}

#parent > a:nth-child(1) { --index: 1; }
#parent > a:nth-child(2) { --index: 2; }
#parent > a:nth-child(3) { --index: 3; }
#parent > a:nth-child(4) { --index: 4; }

#parent > #sub-child { order: 5; }

内容的提问来源于stack exchange，提问作者Pratik Udeshi