如何使用css为嵌套列表着色？答案

【问题标题】：How to color nested list using css?如何使用css为嵌套列表着色？
【发布时间】：2021-12-23 16:26:33
【问题描述】：

我喜欢下面提到的嵌套列表。我想用不同的颜色和下一个列表 ISO 和小册子 用不同的颜色和内部列表 ISO 为它着色'first li' Certification and Graphics Designing在不同的颜色。这怎么可能？

<ul>
    <li>Certification
        <ul>
            <li>ISO
                <ul>
                    <li><label class="checkbox"><input type="checkbox" value="17" name="category[]"> CE</label></li>
                    <li><label class="checkbox"><input type="checkbox" value="18" name="category[]"> FSSAI</label></li>
                    <li><label class="checkbox"><input type="checkbox" value="19" name="category[]"> Trademark</label></li>
                </ul>
            </li>
        </ul>
    </li> 
    <li class="category-name">Graphics Designing
        <ul>
            <li> Brochure </li>
                                                                                          
        </ul>
    </li>  
</ul>

【问题讨论】：

标签： html css responsive-design styles html-lists

【解决方案1】：

在 CSS 中有几种方法可以做到这一点。

这种方式只是使用嵌套结构来选择哪些列表来着色。

它首先将作为 ul 蓝色的直接子元素的每个 li 着色。

然后，通过对作为 ul 的子代的每个 li 着色，该 li 是 li 的子代（不是孙子代），从而变得更加具体。

然后通过向下另一层并将这些元素着色为绿色，它变得更加具体。

您当然可以调用一些您已经必须进行选择的类。这是一个选择问题，取决于您的特定用例。这个 sn-p 一般用于为任何一组嵌套的无序列表着色。

ul>li {
  color: blue;
}

ul>li>ul>li {
  color: magenta;
}

ul>li>ul>li>ul>li {
  color: green;
}

<ul>
  <li>Certification
    <ul>
      <li>ISO
        <ul>
          <li><label class="checkbox"><input type="checkbox" value="17" name="category[]"> CE</label></li>
          <li><label class="checkbox"><input type="checkbox" value="18" name="category[]"> FSSAI</label></li>
          <li><label class="checkbox"><input type="checkbox" value="19" name="category[]"> Trademark</label></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="category-name">Graphics Designing
    <ul>
      <li> Brochure </li>

    </ul>
  </li>
</ul>

【讨论】：