如何在可换行的Flex布局中选中奇数行内的奇数元素？

我正在解决CSS Battle中的一道题目，要求实现：奇数行内的奇数元素和偶数行内的偶数元素显示橙色，其余元素为浅米色。当前我是手动指定元素选择器，但元素数量多的时候这种方法就失效了，想找更通用的实现方式，且要求不能使用独立行容器、Grid布局或给元素加类。

当前仅适用于少量元素的代码实现：

body {
  margin: 10px;
  background: #5C434C;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

div:nth-of-type(1),
div:nth-of-type(3n),
div:nth-of-type(8),
div:nth-of-type(11) {
  background: #F09462;
}

div,
div:last-of-type {
  width: 80px;
  height: 80px;
  background: #F5D6B4;
  border-radius: 100px 0 0;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

核心是利用CSS的nth-of-type()选择器的公式语法，结合每行4个元素的布局规律，编写通用匹配规则：

body {
  margin: 10px;
  background: #5C434C;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 匹配奇数行的奇数位元素 + 偶数行的偶数位元素 */
div:nth-of-type(8n + 1),
div:nth-of-type(8n + 3),
div:nth-of-type(8n + 6),
div:nth-of-type(8n + 8) {
  background: #F09462;
}

div {
  width: 80px;
  height: 80px;
  background: #F5D6B4;
  border-radius: 100px 0 0;
}

公式逻辑说明 #

由于每行固定4个元素，两行共8个元素构成一个循环周期：

• 奇数行（第1、3、5...行）的奇数位元素，在周期内对应第1、3位，用公式8n+1、8n+3匹配（n从0开始）
• 偶数行（第2、4、6...行）的偶数位元素，在周期内对应第6、8位（即第二行的第2、4位），用公式8n+6、8n+8匹配

这个规则不受元素总数限制，只要保持每行4个的flex-wrap布局，就能自动匹配符合要求的元素。

内容的提问来源于stack exchange，提问作者j-0-n-e-z