使用CSS在嵌套的div上重复一组颜色

这是一种依靠一些背景技巧的解决方案。这比可靠的解决方案更近似，因为我会考虑这样一个事实，我在每个级别上只有一行文本。

div {
  border: 1px solid black;
  border-bottom:0;
  font-weight: bold;
  padding: 30px 10px 0;
  line-height:1.2em;
  box-sizing:border-box;
  color:transparent;
}

.first {
  --l:calc(30px + 1.2em + 1px); /* The height of one line + the padding */
  background-image:
    repeating-linear-gradient(to bottom, 
      red    0                calc(1*var(--l)),
      blue   calc(1*var(--l)) calc(2*var(--l)),
      green  calc(2*var(--l)) calc(3*var(--l)),
      purple calc(3*var(--l)) calc(4*var(--l))
    );
  -webkit-background-clip:text;
  background-clip:text;
}

  1
  

    2
    

      3
      

        4
        

          1
          

            2
            

              3
              

                4
                

                  5
                  

                    6
                    

                      7