将CSS样式应用于 <li> 在有序列表中，不适用于嵌套的ol

Question

我有一个具有此结构的嵌套有序列表

<ol>
    <li>
        <span>A</span>
        <ol class="childol">
            <li>
                <span>A1</span>
            </li>
            <li>
                <span>A2</span>
            </li>
        </ol>
     </li>
</ol>

我正在尝试将样式应用于li，例如背景颜色：

li:nth-child(1) { background-color: hsla(41, 100%, 93%, 1); }

我明白了

我试图以100％宽度突出显示“列表简介”。 我试图像这样排除孩子：

li:nth-child(1) :not(.olchild) { background-color: hsla(41, 100%, 93%, 1); }

但我得到这个：

我该怎么做呢？

Answer 1

jsfiddle： http ： //jsfiddle.net/koesbong/KRv4v/3/

ol li {background-color: red;}
ol li li {background-color: white;}

要么

ol:not(.childol) > li {background-color: red;}
ol li {background-color: white;}

Answer 2

用这个

ol li{
  background:yellow;  
}

 li ol li{
  background:green;
} 

Answer 3

只需使用儿童组合器（ ol > li ）而不是后代组合（ ol li ）。

Answer 4

问题是backgournd颜色应用于父列表的整个第一个列表项。 我将一个类应用于父列表和样式：

<style>
   ol.parent>li{ background-color: hsla(41, 100%, 93%, 1); }
   li>ol, li>ol>li{background-color:#FFF;}
</style>

<ol class="parent">
    <li>
        <span>A</span>
        <ol>
            <li>
                <span>A1</span>
            </li>
            <li>
                <span>A2</span>
            </li>
        </ol>
     </li>
</ol>

用适当的背景颜色替换白色（#FFF）