使用 CSS 在嵌套 div 上重復一組 colors

Question

我有一組四個 colors，我想將它們應用到嵌套的 div，所以每個下一個孩子都有不同的顏色。 如果有第五層嵌套，我想從第一種顏色重新開始，即使我有無限深的嵌套層，也要繼續進行。 這是否可能僅與 CSS 選擇器有關並避免 JavaScript ？

我目前停留在以下代碼中-您可以看到粉色在第 4 次之后一直應用於所有嵌套的 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>

Answer 2

這是一個依賴於一些背景技巧的解決方案的想法。 它更像是一個近似值而不是一個強大的解決方案，因為我會考慮這樣一個事實，即我在每個級別上只有一行文本。

 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; }

 <div class="first"> 1 <div> 2 <div> 3 <div> 4 <div> 1 <div> 2 <div> 3 <div> 4 <div> 5 <div> 6 <div> 7 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>