样式嵌套列表元素的子项、孙项等

Question

我需要一个循环来为列表元素设置项目符号的样式。儿童-绿色孙子——蓝色曾孙 - 灰色孙子孙女-绿色曾曾曾孙 - 蓝色 Grand grand grand grandchildren - 灰色

我创建了一个 CodePen 来解释我的意思。 https://codepen.io/Pepe199111/pen/yLoddog

enter image description here

目前我添加了 CSS 样式，但它仅适用于前 3 行。

ul {
margin-bottom: 20px !important;
font-weight: 800;
list-style: none;

li::before {
  content: "CF ";
  color: green;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  display: inline-block;
  font-size: 18px;
}

ul {
  li::before {
    content: "CF ";
    color: blue;
  }
}

ul {
  ul {
    li::before {
      content: "CF ";
      color: gray;
    }
  }
}

ul {
  ul {
    ul {
      li::before {
        content: "CF ";
        color: green;
      }
    }
  }
}

ul {
  ul {
    ul {
      ul {
        li::before {
          content: "CF ";
          color: blue;
        }
      }
    }
  }
}

ul {
  ul {
    ul {
      ul {
        ul {
          li::before {
            content: "CF ";
            color: gray;
          }
        }
      }
    }
  }
}
}

如果有更多的嵌套元素使其也适用于它们。

Answer 1

您可以使用颜色列表和列表来跟踪嵌套级别

ul {
    margin-bottom: 20px !important;
    font-weight: 800;
    list-style: none;

    li::before {
        content: "CF ";
        display: inline-block;
        width: 1em;
        margin-left: -1em;
        display: inline-block;
        font-size: 18px;
    }

    $bullet-colors: (red, orange, yellow, chartreuse, blue, purple);    
    
    // list to add one level of nesting per loop
    $parent-items: null;
    @each $color in $bullet-colors {
        #{$parent-items} li::before { color: $color; }
        $parent-items: append($parent-items, li);
    }
}

循环输出

ul li::before { color: red; }
ul li li::before { color: orange; }
ul li li li::before { color: yellow; }
ul li li li li::before { color: chartreuse; }
ul li li li li li::before { color: blue; }
ul li li li li li li::before { color: purple; }

Answer 2

问题是我们只循环了颜色。因此，如果我在 $bullet-colors 中有 3 种颜色，则第 4、5、6... 嵌套元素的颜色将与第 3 个相同。 enter image description here

样式嵌套列表元素的子项、孙项等

Style nested list elements children, grandchildren and more

css

nested

function

sass