基于CSS的深度的替代颜色 [英] Alternate colors based on depth with CSS

问题描述

问题:

我正在制作一个导航CSS模块.我希望子菜单的背景颜色与其父菜单不同.但是，如果子菜单中有一个子菜单，则我需要该子菜单具有与其父级相同的背景色.我知道如果我设置允许的子菜单数量限制，我可以相当冗长地做到这一点，但是我更希望该选项具有所需的尽可能多的嵌套菜单，并为它们适当地着色.是否有一些CSS技巧可以做到这一点，或者我被降级为JS?

I'm making a nav CSS module. I'm wanting submenus to have a different background color than their parent menu. However, if there is a submenu within a submenu, I need that submenu to have the same background color as it's parent's parent. I know I could do this fairly verbosely if I set a limit on the number of submenus that would be allowed but I would prefer the option to have as many nested menus as needed and have them colored appropriately. Is there some CSS trickery that can do this or am I relegated to JS for this?

我已经研究过:nth-child和:nth-of-type，但是据我所知，这些仅适用于父节点中的同级元素.

I've looked into :nth-child and :nth-of-type but these only apply to sibling elements within a parent node as far as I know.

代码:

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变量和渐变色的递归行为.诀窍是在每个级别上增加变量，同时移动背景，我们将在两种颜色之间进行交替:

Here is an idea based on my previous answer where I will rely on a recursive behavior of CSS variables and gradient coloration. The trick is to increment the variable on each level and at the same time move the background and we will alternate between both colors:

: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%，并使用n数量的颜色，然后在渐变内拆分颜色，以便每一个都具有相同的比例100%/n

You can easily increase to any number of colors. Simply make the background size to be n*100% with n number of colors and split the color inside the gradient so each one will have the same proportion 100%/n

有关了解背景值背后的计算的相关问题:

Related question to understand the calculation behind the background values:

将百分比值与线性梯度的背景位置一起使用

这篇关于基于CSS的深度的替代颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！