CSS直接子选择器>设置color属性未按预期生效问题排查

在以下代码中，选择器ul.veg-list>li添加color属性后未按预期工作：它将所有li元素渲染为红色，但本应仅作用于直接子级li。同一声明块中的list-style-type、font-size和padding属性却正常生效，请问原因是什么？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 16px;
        }

        .veg-list {
            border: 5px solid darkblue;
            width: 30%;
            padding: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 2%;

        }

        ul.veg-list>li {
            list-style-type: none;
            font-size: 1.2rem;
            padding-left: 5%;
            color: red;

        }

        ul.veg-list>li ol li {
            margin-left: 6%;
            line-height: 200%;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <ul class="veg-list">
        <li>Green Leafy Vegetables
            <ol>
                <li>Spinach</li>
                <li>Fenugreek</li>

            </ol>
        </li>
        <li>Fruits
            <ol>
                <li>Magno</li>
                <li>Banana</li>
                <li>Pineapple</li>
                <li>Lichi</li>
            </ol>
        </li>
        <li>Salads
            <ol>
                <li>Cucumber</li>
                <li>Carrot</li>
                <li>Raddish</li>
                <li>Onion</li>
            </ol>
        </li>
        <li>Herbs
            <ol>
                <li>Basil</li>
                <li>coriender</li>
                <li>Turmeric</li>
            </ol>
        </li>
    </ul>

</body>
</html>

原因分析 #

1. color是可继承属性：
   你用ul.veg-list>li选择器给直接子级li设置了color: red，但color属于CSS可继承属性，后代元素如果没有自己的color值，就会自动继承父元素的color。你的后代li（即ol下的li）没有设置color，所以继承了上级li的红色。

2. 其他属性看似正常的原因：

   • list-style-type：直接子级li设为none，但ol下的li属于有序列表的子元素，ol默认的list-style-type是decimal（数字编号），且你没有修改ol的该属性，所以后代li继承ol的样式，看起来只有直接子级li生效。
   • font-size：你在通配符*选择器里给所有元素设置了font-size:16px，虽然直接子级li的1.2rem优先级更高，但后代li的父元素ol继承了*的16px，所以后代li继承ol的字体大小，而非直接子级li的大小，因此看起来只有直接子级li的字体生效。
   • padding-left：这是不可继承属性，只有被选择的直接子级li会应用该样式，后代li不会继承。

解决方案 #

方案1：给后代li设置color覆盖继承值 #

修改CSS中后代li的样式，添加color属性：

ul.veg-list>li ol li {
    margin-left: 6%;
    line-height: 200%;
    color: #000; /* 设置你需要的默认颜色 */
}

方案2：用span包裹直接子级li的文本内容 #

把直接子级li的文本放在span标签里，再给span设置color，这样颜色只会作用于文本，不会影响后代元素：
修改后的HTML片段：

<li><span>Green Leafy Vegetables</span>
    <ol>
        <li>Spinach</li>
        <li>Fenugreek</li>
    </ol>
</li>

对应的CSS修改：

ul.veg-list>li {
    list-style-type: none;
    font-size: 1.2rem;
    padding-left: 5%;
    /* 移除原本的color */
}

ul.veg-list>li span {
    color: red; /* 给span设置颜色 */
}

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