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

Question

I have a nested ordered list with this structure

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

I'm trying to apply a style to the li, eg a background colour:

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

and I get this:

I'm trying to get the "Introduction to Lists" highlighted on its own with 100% width. I've tried to exclude the child ol like this:

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

but I just get this:

How do I do this?

Answer 1

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

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

or

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

Answer 2

use this

ol li{
  background:yellow;  
}

 li ol li{
  background:green;
} 

Answer 3

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

Answer 4

The problem is the backgournd colour is applied to the whole of the first list item of your parent list. I'd applie a class to the parent list and style that:

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

Replacing White (#FFF) with your appropriate background colour