CSS纯粹是声明性的。没有数组或类似的概念。您可以通过覆盖唯一更改的颜色（颜色）来简化自己的配置。
details>* {
margin-left: 1em;
}
details {
border-left: 5px solid red;
}
details>details {
border-color: blue;
}
details>details>details {
border-color: green;
}
details>details>details>details {
border-color: yellow;
}
details>details>details>details>details {
border-color: goldenrod;
}
<body>
<details open="open">
<summary>Title for comment #1</summary>
<p>Comment 1: Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<details open="open">
<summary>Title for comment #2</summary>
<p>Comment 2: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,turpis et commodo pharetra.</p>
<details open="open">
<summary>Title for comment #3</summary>
<p>Comment 3: Sed ut perspiciatis,unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</details>
</details>
</details>
<details open="open">
<summary>Title for comment #4</summary>
<p>Comment 4: Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<details open="open">
<summary>Title for comment #5</summary>
<p>Comment 5: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,turpis et commodo pharetra.</p>
<details open="open">
<summary>Title for comment #6</summary>
<p>Comment 6: Sed ut perspiciatis,unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</details>
</details>
</details>
</body>
,
如果您可以通过添加额外的包装器来调整HTML，则可以使用一些CSS变量技巧和Traceback (most recent call last):
File "e:\python375\lib\runpy.py",line 193,in _run_module_as_main
"__main__",mod_spec)
File "e:\python375\lib\runpy.py",line 85,in _run_code
exec(code,run_globals)
File "E:\Python375\Scripts\pip.exe\__main__.py",line 9,in <module>
TypeError: 'module' object is not callable
来实现。
这个想法是用您想要的颜色定义一个渐变，这将成为您的数组（我在这里考虑了4种颜色）。然后，您使用linear-gradient使用CSS变量显示下一个颜色，该变量在每个级别上递增（这就是为什么我们需要额外的包装器）。
background-position
:root {
--p: 0; /* Control the first color*/
}
details {
padding-left: 5px;
position: relative; /* Make the pseudo element relative to details to replace the border */
--x: var(--p);
}
div {
--p: calc(var(--x) + 1); /* Increment the variable for the next level*/
}
details>div:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background:
linear-gradient(to right,/* Your array of colors (N = 4) */
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))
/* Position: x*(100%/(N-1)) 0 Size: N*100% 100% */
calc(var(--x)*100%/3) 0/400% 100%;
}
details>* {
margin-left: 1em;
}
您可以考虑相同的想法，并使用滤镜，hsl或其他任何技术根据初始想法生成颜色：
<body>
<details open="open">
<summary>Title for comment #1</summary>
<div>
<p>Comment 1: Lorem ipsum dolor sit amet,sed do eiusmod tempor
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<details open="open">
<summary>Title for comment #2</summary>
<div>
<p>Comment 2: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,turpis et commodo pharetra.</p>
<details open="open">
<summary>Title for comment #3</summary>
<div>
<p>Comment 3: Sed ut perspiciatis,unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
</details>
</div>
</details>
</div>
</details>
<details open="open">
<summary>Title for comment #4</summary>
<div>
<p>Comment 4: Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<details open="open">
<summary>Title for comment #5</summary>
<div>
<p>Comment 5: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,turpis et commodo pharetra.</p>
<details open="open">
<summary>Title for comment #6</summary>
<div>
<p>Comment 6: Sed ut perspiciatis,unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<details open="open">
<summary>Title for comment #6</summary>
<div>
<p>Comment 6: Sed ut perspiciatis,unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<details open="open">
<summary>Title for comment #6</summary>
<div>
<p>Comment 6: Sed ut perspiciatis,unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
</details>
</div>
</details>
</div>
</details>
</div>
</details>
</div>
</details>
</body>
:root {
--p: 0; /* Control the first color*/
}
details {
padding-left: 5px;
position: relative; /* Make the pseudo element relative to details to replace the border */
--x: var(--p);
}
div {
--p: calc(var(--x) + 2); /* Increment the variable for the next level*/
}
details>div:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: red;
filter:hue-rotate(calc(var(--x)*45deg)) brightness(2);
}
details>* {
margin-left: 1em;
}
本文链接：https://www.f2er.com/3169860.html
