Применение стилей CSS к <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); }

, и я получаюthis:

Я пытаюсь выделить «Введение в списки» самостоятельно со 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) вместо потомка (ol li).

Answer 3

используйте это

ol li{
  background:yellow;  
}

 li ol li{
  background:green;
} 

Answer 4

Проблема в том, что цвет фона применяется ко всему первому элементу вашего родительского списка.Я бы применил класс к родительскому списку и применил бы стиль:

<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) на соответствующий цвет фона