小编Bar*_*ara的帖子

我有 5 个 div，每个第二个 div 的颜色都应该与其他 div 不同。

<div class="element element1">Element1</div>
<div class="element element2">Element2</div>
<div class="element element3">Element3</div>
<div class="element element4">Element4</div>
<div class="element element5">Element5</div>

在我的 CSS 中我有

.element {
 background-color: grey;
}

.element:nth-child(odd) {
 background-color: pink;
}

现在这些元素的顺序会动态地改变，我想用 Flexbox 来做到这一点。这意味着我的 CSS 看起来像这样：

.element {
 background-color: grey;
 display:flex;
}

.element5 {
 order: 1;
}

.element2 {
 order: 2;
}

由于 flexbox 不会更改 DOM，因此 nth-child(odd) 仍会为每个第二个 DOM 元素设置样式，这不是用户将看到的顺序。但这就是我想要的。用户看到的每个第二个元素都应该有不同的颜色，即使该元素使用 Flexbox 更改了顺序。有谁知道这是如何运作的？我只能使用 CSS 或 HTML，不能使用 JavaScript 或 PHP。