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

Question

我想要一些具有不同颜色边框的嵌套 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 步使用的颜色。

Repeating a set of colors on nested divs with CSS

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

<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>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

如果您可以使用不同的元素交替嵌套，您可以尝试使用 CSS 变量，如下所示。我们需要不同的元素才能在结合两个变量的每个级别上增加一个变量。 （相关：Can a recursive variable be expressed in css?）

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

:root {
  --p:0;
  --x:0;
}

.first,
.first span,
.first div{
  padding:10px;
  border:5px solid transparent;
  background:
    linear-gradient(white,white) padding-box, /* Color only the padding box*/
    /* N = 4*/
    repeating-linear-gradient(
      red    0              calc(100%/4),
      blue   calc(1*100%/4) calc(2*100%/4),
      green  calc(2*100%/4) calc(3*100%/4),
      purple calc(3*100%/4) calc(4*100%/4)) 
   0 calc(var(--p)*100%/3)/ /* 0 var(--p)*100%/(N-1) */
   100% 400% /* Width:100% height:N*100% */
   border-box; /* Color the border area */
}
.first span {
  --p:calc(var(--x) + 1);
  display:block;
}
.first div {
  --x:calc(var(--p) + 1);
  background-position:0 calc(var(--x)*100%/3); /* 0 var(--x)*100%(N-1) */
}

<div class="first">
  <span>
    <div>
     <span>
      <div>
      <span>
       <div>
        <span>
          <div>
          </div>
        </span>
       </div>
     </span>
    </div>
   </span>
  </div>
 </span>
</div>

你也可以保持相同的元素，用一个类来区分：

:root {
  --p:0;
  --x:0;
}

.first,
.first *{
  padding:10px;
  border:5px solid transparent;
  background:
    linear-gradient(white,white) padding-box, /* Color only the padding box*/
    /* N = 4*/
    repeating-linear-gradient(
      red    0              calc(100%/4),
      blue   calc(1*100%/4) calc(2*100%/4),
      green  calc(2*100%/4) calc(3*100%/4),
      purple calc(3*100%/4) calc(4*100%/4)) 
   0 calc(var(--p)*100%/3)/ /* 0 var(--p)*100%/(N-1) */
   100% 400% /* Width:100% height:N*100% */
   border-box; /* Color the border area */
}
.first div.x {
  --p:calc(var(--x) + 1);
}
.first div:not(.x) {
  --x:calc(var(--p) + 1);
  background-position:0 calc(var(--x)*100%/3); /* 0 var(--x)*100%(N-1) */
}

<div class="first">
  <div class="x">
    <div>
      <div class="x">
        <div>
          <div class="x">
            <div>
              <div class="x">
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>