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

Question

我有一组四种颜色，我想将它们应用到嵌套的 div，所以接下来的每个子元素都有不同的颜色。如果有第五层嵌套，我想从第一种颜色开始，并继续下去，即使我有无限深的嵌套。这是否可以仅使用 CSS 选择器来实现并避免使用 JavaScript？

我目前陷入了以下代码 - 正如您所看到的，粉红色不断应用于第四个之后的所有嵌套 div。

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
}

div {
  color: red;
}

div>div {
  color: blue;
}

div>div>div {
  color: green;
}

div>div>div>div {
  color: pink;
}

<div>
  1
  <div>
    2
    <div>
      3
      <div>
        4
        <div>
          1
          <div>
            2
            <div>
              3
              <div>
                4
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我们可以使用hue-rotate来达到想要的效果。通过将过滤器设置为 90deg，它将每 4 个子项重复一次。通过将起始颜色指定为蓝色并将色调旋转 90 度，我们得到红色。

我认为不可能按照您要求使用纯CSS的方式指定四种不同的颜色，除非您愿意重复 div > div > ... 以获得理论最大值巢？

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
  color: blue;
  filter: hue-rotate(90deg) saturate(2.5);
}

<div>1
  <div>2
    <div>3
      <div>4
        <div>1
          <div>2
            <div>3
              <div>4
                <div>1
                  <div>2
                    <div>3
                      <div>4
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

带有 lorem ipsum 文本的示例:

div {
  border: 1px solid black;
  font-weight: bold;
  padding: 30px;
  color: blue;
  filter: hue-rotate(90deg) saturate(2.5);
}

<div>Mauris rhoncus sollicitudin egestas. Donec eu est est. Phasellus neque justo, faucibus in nisl dignissim, aliquet luctus orci. Fusce bibendum libero ac lectus consequat, in scelerisque orci tempus. Donec aliquam, diam quis dignissim laoreet, magna urna
  mattis libero, non vehicula purus ante nec ipsum. In aliquet ipsum id risus ultrices pellentesque. Sed lobortis ante eget nisi lobortis, sit amet ornare neque lacinia. Donec auctor mauris varius lorem fermentum congue. Suspendisse porta, lorem at molestie
  volutpat, neque justo tempor diam, vel mattis ipsum neque sollicitudin odio. Morbi tincidunt purus eu tellus lobortis euismod id sit amet nulla. Etiam vitae ante eu enim tincidunt laoreet eget nec dolor. Proin varius, risus sed fringilla condimentum,
  ligula dui porta purus, id congue nisl dui id risus. Integer elementum lacus a iaculis pretium. Cras erat lorem, mollis facilisis lectus in, pharetra vulputate augue. Suspendisse quis eleifend enim. Suspendisse at volutpat ex.
  <div>Etiam vitae orci a quam dictum viverra nec id enim. Nam ac sapien at diam commodo elementum. Proin elementum, sem non cursus euismod, risus ante consectetur lectus, eu tempus lacus ipsum id ligula. Donec pretium eros vel tellus fermentum, vitae iaculis
    risus rutrum. Aenean pulvinar fringilla condimentum. In accumsan varius volutpat. Nullam vitae aliquam nunc. Nam in luctus nisl, in pellentesque turpis. Fusce eu pulvinar lacus. Duis suscipit rhoncus velit, vel laoreet nibh fermentum ut. Etiam pulvinar
    odio id felis imperdiet suscipit. Duis dictum dignissim tortor et iaculis.
    <div>Mauris vulputate, leo in sodales eleifend, massa nunc mollis tortor, nec commodo lacus tortor id ante. Quisque porttitor nulla et cursus molestie. Praesent laoreet tincidunt massa at auctor. In et faucibus odio. Duis sit amet ultrices massa, efficitur
      rutrum augue. Integer laoreet ante vitae venenatis ultrices. Aenean quis enim ut lacus scelerisque consequat in id sapien. Integer quam tortor, ornare vel tellus id, hendrerit hendrerit leo. Cras in est at urna rutrum imperdiet. Nulla convallis
      tortor tincidunt massa accumsan, quis suscipit risus eleifend. Aenean justo risus, commodo sit amet lacus sit amet, vulputate commodo nisl.
      <div>Aenean in justo quis mi dictum ultrices non et ligula. Phasellus porttitor gravida magna, vitae placerat sapien maximus et. Curabitur vel neque quis diam commodo tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
        ac turpis egestas. Morbi ut leo non est tristique blandit. Vestibulum eu ullamcorper lorem. Nulla massa elit, auctor a lacus vel, rutrum euismod lectus. Integer vel quam vel sapien finibus placerat bibendum quis massa. In et dolor eu enim vulputate
        convallis nec sit amet purus. Etiam metus ante, iaculis nec gravida nec, vulputate et nisl. Fusce et nunc quis nulla condimentum vestibulum.
        <div>Donec consectetur, nisl sed blandit pharetra, tortor lectus ullamcorper leo, vel rhoncus nisi massa ut ligula. In at ligula ut nisi porttitor congue. Aliquam eget venenatis nisl, eget varius augue. Etiam vel metus et diam finibus tristique. Nullam
          gravida commodo neque ac accumsan. Nunc venenatis fermentum tellus, at consectetur arcu feugiat ut. Pellentesque nec pretium elit, vitae facilisis elit. Nam porttitor molestie aliquam. Ut elementum quam ac bibendum porttitor. Duis lacinia, orci
          et malesuada sollicitudin, arcu nisi sodales urna, consectetur feugiat metus dolor sit amet lacus. Nullam consequat gravida magna, sed pellentesque purus rhoncus et. Vivamus tempor dignissim convallis. Praesent sagittis tincidunt pretium. Vivamus
          vitae posuere nibh.
          <div>Vivamus pellentesque, ante in posuere ullamcorper, urna quam pulvinar neque, nec facilisis libero augue id lectus. Proin nec nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet vehicula eros. Etiam euismod
            erat sit amet vulputate porta. Integer non elementum lacus. Donec iaculis enim vel arcu aliquam, eu vulputate lorem pharetra. Praesent sed ex vel odio rutrum scelerisque. Proin et lobortis nunc. Praesent varius, tortor vel pellentesque rhoncus,
            ante augue tristique tellus, nec finibus justo nisi a dolor. Donec molestie orci arcu, nec pharetra purus tempor vitae. Donec tempor est sit amet lorem lobortis, ac gravida ipsum congue. Donec eget consequat nulla. Sed cursus vulputate porta.
            Quisque tempus, nibh ut blandit semper, massa metus dapibus felis, sit amet imperdiet purus tellus id risus. Vestibulum id consequat mauris.
            <div>Ut tristique porttitor magna, ut eleifend urna. Quisque metus magna, sagittis aliquet pulvinar id, fringilla eget turpis. Nam mollis fringilla magna, at tincidunt sapien pulvinar id. Nam hendrerit sed urna sed finibus. Maecenas mollis enim
              eu sem dictum consequat. Morbi gravida augue ac magna ornare auctor. Sed laoreet id sem a laoreet.
              <div>Cras eu augue sollicitudin, ullamcorper enim et, laoreet mauris. Pellentesque eget pretium erat. Ut ac tincidunt eros. Etiam eu nisi dui. Ut placerat et orci ut dapibus. Ut vitae tellus enim. Quisque nunc arcu, aliquam in blandit nec, ultrices
                ut tellus. Phasellus maximus euismod odio ut luctus. Nunc sollicitudin est tellus, et hendrerit elit egestas eget. Nulla vestibulum sollicitudin finibus. Phasellus ornare nulla nulla, et fringilla ex tempus vel. Aliquam bibendum ultricies
                tortor non cursus. Quisque eleifend velit lorem, et ultricies felis iaculis vitae. Pellentesque eu sapien et nisl facilisis pulvinar nec non augue. Nunc ultrices metus sem, ac ornare risus ultricies eget. Maecenas efficitur rutrum dignissim.


                <div>Nam justo erat, dictum et quam eu, tempor sagittis justo. Fusce auctor vitae libero sit amet tempus. Aenean tempus lacus nisl, vitae luctus nisi aliquet vel. Integer mattis risus quis leo mollis, eu laoreet ante semper. Vestibulum mollis
                  nisl non est aliquet efficitur ac ut turpis. Aenean convallis eget velit in finibus. Donec placerat, libero in mattis convallis, leo lectus pretium leo, nec scelerisque tellus massa in ipsum. Aliquam pulvinar ante et tincidunt bibendum.
                  Mauris scelerisque arcu in lorem semper, in finibus diam ultrices.
                  <div>Ut ornare, nunc varius tincidunt venenatis, arcu elit euismod tortor, ut vehicula urna tellus in tortor. Cras non placerat turpis, ac molestie nibh. In elementum id felis sed bibendum. Cras aliquet dolor quis bibendum dictum. Nullam
                    varius velit ut felis condimentum mattis. Ut dapibus ex vitae lectus sollicitudin imperdiet at eget mauris. Nulla facilisi. Vivamus lacus sem, aliquam ac eros ut, condimentum hendrerit quam. Maecenas non odio purus. Vivamus commodo
                    et lectus vitae consequat. Integer fermentum volutpat mauris, sit amet fringilla sapien pharetra vel. Vestibulum egestas rutrum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
                    sed turpis ac nunc feugiat ultrices nec ut lorem. Sed risus turpis, molestie sit amet congue eget, vestibulum eu risus. Proin ullamcorper eleifend mauris, et commodo velit tempor vel.
                    <div>Cras elit felis, dictum a congue id, aliquam vitae dolor. Curabitur imperdiet laoreet ante, vitae dapibus lectus efficitur ultrices. Proin interdum mauris ipsum. Quisque nec posuere magna, ac interdum sapien. Cras mauris dui, accumsan
                      in nibh ac, dapibus finibus odio. Donec rhoncus elit vel nunc sollicitudin placerat. Suspendisse eu mattis enim. Cras et cursus purus. Aliquam suscipit mi et sapien rhoncus, eu feugiat nunc tincidunt.
                      <div>Aenean faucibus pulvinar dolor, et sagittis odio ultrices ac. Aliquam erat volutpat. Sed in purus eget lectus posuere molestie mattis ac nibh. Proin ut dolor bibendum, tristique risus ac, lobortis nisi. Fusce ac diam imperdiet velit
                        vulputate malesuada vitae vel ex. Sed rutrum nibh quis magna auctor, vel congue est rutrum. Maecenas ut magna nibh.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>