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

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）