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

Question

我喜欢下面提到的嵌套列表。我想给它上色 'first li' Certification and Graphics Designing 不同的颜色和下一个列表 ISO 和 Brochure 不同的颜色和内部列表 ISO 不同颜色。这是怎么做到的？

<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>

Answer 1

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

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

它首先为 ul 蓝色的直接子级的每个 li 着色。

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

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

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

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>

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

How to color nested list using css?

html

css

styles

html-lists

responsive-design