如何使用CSS为嵌套列表的不同列表项设置差异化颜色

你可以通过两种方式实现需求，分别对应是否修改原有HTML结构：

方案1：不修改现有HTML结构 #

通过子代选择器+结构伪类精准匹配对应层级的元素，同时要注意父元素颜色会继承给子元素，需要手动重置子列表的颜色避免污染：

/* 第一层第一个li文本：Certification 设为蓝色 */
body > ul > li:first-child {
  color: #2563eb;
}
/* 第一层第二个li文本：Graphics Designing 设为紫色 */
body > ul > li.category-name {
  color: #7c3aed;
}
/* 重置第一层li下的子列表颜色，避免继承父级颜色 */
body > ul > li > ul {
  color: #333;
}

/* 第二层第一个li文本：ISO 设为绿色 */
body > ul > li:first-child > ul > li {
  color: #16a34a;
}
/* 第二层第二个li文本：Brochure 设为橙色 */
body > ul > li.category-name > ul > li {
  color: #f97316;
}
/* 重置第二层li下的子列表颜色 */
body > ul > li > ul > li > ul {
  color: #333;
}

/* ISO下的第三层子列表项统一设色示例，也可单独设置不同颜色 */
body > ul > li:first-child > ul > li > ul > li:nth-child(1) label {
  color: #dc2626; /* CE 红色 */
}
body > ul > li:first-child > ul > li > ul > li:nth-child(2) label {
  color: #0d9488; /* FSSAI 青色 */
}
body > ul > li:first-child > ul > li > ul > li:nth-child(3) label {
  color: #f59e0b; /* Trademark 琥珀色 */
}

注意：如果你的ul不是直接放在body下，需要把选择器开头的body替换为ul的父级元素选择器，避免匹配到页面其他列表。

方案2：少量修改HTML，可维护性更高（更推荐） #

给每个需要自定义颜色的文本外层加带类名的span，后续列表结构变化也不会影响样式匹配：

修改后的HTML代码 #

<ul>
    <li><span class="l1-text cert">Certification</span>
        <ul>
            <li><span class="l2-text iso">ISO</span>
                <ul>
                    <li><label class="checkbox l3-text ce"><input type="checkbox" value="17" name="category[]"> CE</label></li>
                    <li><label class="checkbox l3-text fssai"><input type="checkbox" value="18" name="category[]"> FSSAI</label></li>
                    <li><label class="checkbox l3-text trademark"><input type="checkbox" value="19" name="category[]"> Trademark</label></li>
                </ul>
            </li>
        </ul>
    </li> 
    <li class="category-name"><span class="l1-text design">Graphics Designing</span>
        <ul>
            <li><span class="l2-text brochure"> Brochure </span></li>
        </ul>
    </li>  
</ul>

对应CSS代码 #

/* 第一层文本 */
.l1-text.cert { color: #2563eb; }
.l1-text.design { color: #7c3aed; }

/* 第二层文本 */
.l2-text.iso { color: #16a34a; }
.l2-text.brochure { color: #f97316; }

/* 第三层文本 */
.l3-text.ce { color: #dc2626; }
.l3-text.fssai { color: #0d9488; }
.l3-text.trademark { color: #f59e0b; }

两种方案里的色值都可以根据你的实际需求替换。

内容的提问来源于stack exchange，提问作者kumari shwetha