Problem:
我正在制作一个导航 CSS 模块。我希望子菜单具有与其父菜单不同的背景颜色。但是，如果子菜单中有子菜单，我需要该子菜单具有与其父级的父级相同的背景颜色。我知道如果我对允许的子菜单数量设置限制，我可以相当详细地做到这一点，但我更喜欢选择根据需要拥有尽可能多的嵌套菜单并让它们适当着色。是否有一些 CSS 技巧可以做到这一点，或者我是否因此而被降级为 JS？
我调查过:nth-child and :nth-of-type但据我所知，这些仅适用于父节点内的同级元素。
Code:
ul.nav {
list-style: none;
}
ul.nav.dropdown {
height: 0;
overflow: hidden;
}
ul.nav.dropdown.show {
height: auto;
}
ul.nav li {
background-color: #44499f;
}
ul.nav ul li {
background-color: #b6ff00;
}
<ul class="nav">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
这是一个基于的想法我之前的回答我将依赖 CSS 变量和渐变着色的递归行为。诀窍是增加每个级别上的变量，同时移动背景，我们将在两种颜色之间交替：
:root {
--x:0;
}
ul.nav {
list-style: none;
position: relative;
border:1px solid;
background:
linear-gradient(yellow 50%,pink 0) 0 calc(var(--x)*100%)/100% 200%;
--y: calc(var(--x) + 1);
}
ul.nav li {
--x: calc(var(--y));
}
<ul class="nav">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
你也可以用3种颜色
:root {
--x:0;
}
ul.nav {
list-style: none;
position: relative;
border:1px solid;
background:
linear-gradient(lightblue 33.33%,yellow 33.33% 66.66%,pink 0) 0 calc(var(--x)*100%)/100% 300%;
--y: calc(var(--x) + 1);
}
ul.nav li {
--x: calc(var(--y));
}
<ul class="nav">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li>
<a class="dropdown-toggle">Test dropdown</a>
<ul class="nav dropdown">
<li><a>Test link</a></li>
<li><a>Test link</a></li>
<li><a>Test link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
您可以轻松增加任意数量的颜色。只需将背景尺寸设置为n*100% with n颜色数量并拆分渐变内的颜色，以便每种颜色具有相同的比例100%/n
了解背景值背后的计算的相关问题：
在线性渐变上使用带有背景位置的百分比值
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
