Html 如何创建嵌套div的重复彩虹是CSS

我想有一些嵌套div与不同的颜色边界有一个重复的模式

我可以有5种颜色，红、蓝、绿、黄、橙

我希望得到与下面相同的效果，但是只根据DIV的位置使用css，而不是实际上必须在每个DIV上添加一个类名

<div class="redBorder">
  <div class="blueBorder">
    <div class="greenBorder">
      <div class="yellowBorder">
        <div class="orangeBorder">
          <div class="redBorder">
            <div class="blueBorder">
              <div class="greenBorder">
                <div class="yellowBorder">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这与这里发布的问题类似，但我想指定每个第n步使用的颜色

我已经从给出的示例中尝试了以下内容

<style>
    div {
        border: 2px solid #ccc;
        border-top: 5px solid #ccc;
        padding: 5px;
        padding-top: 50px;
        border-radius: 5px;
    }

    div {
        border-color: linear-gradient(
                to right,
                red calc(0 * 100% / 4) calc(1 * 100% / 4),
                blue calc(1 * 100% / 4) calc(2 * 100% / 4),
                green calc(2 * 100% / 4) calc(3 * 100% / 4),
                yellow calc(3 * 100% / 4) calc(4 * 100% / 4)
            )
            calc(var(--x) * 100% / 3) 0/400% 100%;
    }
</style>

div{
边框：2个实心#ccc；
边框顶部：5px实心#ccc；
填充物：5px；
填充顶部：50px；
边界半径：5px；
}
div{
边框颜色：线性渐变(
对,，
红色钙（0*100%/4）钙（1*100%/4），
蓝色钙（1*100%/4）钙（2*100%/4），
绿色计算（2*100%/4）计算（3*100%/4），
黄色钙（3*100%/4）钙（4*100%/4）
)
计算（var（-x）*100%/3）0/400%100%；
}

使用以下标记，但这不起作用

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

---

如果您可以使用不同的元素交替嵌套，您可以使用CSS变量尝试下面的方法。我们需要不同的元素，以便能够在每个级别上增加一个变量，并结合两个变量。（相关：）

我考虑了4种颜色，但您可以轻松缩放到任意数量：

：根目录{
--p:0；
--x:0；
}
.首先，
.第一跨，
.第一组{
填充：10px；
边框：5px实心透明；
背景：
线性渐变（白色，白色）填充框，/*仅为填充框添加颜色*/
/*N=4*/
重复线性梯度(
红色0计算值（100%/4），
蓝色钙（1*100%/4）钙（2*100%/4），
绿色计算（2*100%/4）计算（3*100%/4），
紫色钙质（3*100%/4）钙质（4*100%/4））
0计算值（var（--p）*100%/3）/*0计算值（--p）*100%/（N-1）*/
100%400%/*宽度：100%高度：N*100%*/
边框框；/*为边框区域着色*/
}
.第一跨{
--p:calc（var（-x）+1）；
显示：块；
}
.第一组{
--x:calc（var（-p）+1）；
背景位置：0计算（var（-x）*100%/3）；/*0 var（-x）*100%（N-1）*/
}

related:另一个想法：感谢这些示例，我正在努力让它们发挥作用，但是，带线性渐变的边框颜色似乎不起作用。请包含完整的代码，包括您自己尝试创建颜色的代码。我添加了我的尝试#这是无效的HTML。

span

可能不包含

div

@RoToRa用

节、cutom标签等替换。。我正在演示一个想法（这是可行的），而不是专注于代码的有效性。我不想做变通，但如果这是唯一的方法，那么我想这是唯一的方法，非常感谢你的回答。