Why is the css rule not valid for the first item in the list?-CodePudding

Why is the css rule not valid for the first item in the list? Why is the css rule not valid for the first item in the list? Why is the css rule not valid for the first item in the list? Why is the css rule not valid for the first item in the list?

ol {
   padding-left: 10px;
   margin-top: 1em;
   margin-bottom: 1em;
  
}

ol   li {
 background-color:yellow;
 
}

ol > li  > ol > li {
      padding-left: 10px;
}

ol {
   list-style: none;
   counter-reset: li;
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
}

<ol>

<li>colors1</li>
<ol>
<li>green</li>
<li>green</li>
</ol>


<li>colors2</li>
<ol>
<li>yellow</li>
<li>yellow</li>
</ol>



<li>colors3</li>
<ol>

<li>red</li>
<li>red</li>
<li>red</li>
</ol>
</ol>

Why is the rule not valid for the first item in the list?

CodePudding user response：

ol {
   padding-left: 10px;
   margin-top: 1em;
   margin-bottom: 1em;
  
}
ul > li {
 background-color:yellow;
 
}
ol > li  > ol > li {
      padding-left: 10px;
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
}

ul,ol  {
   list-style: none;
   counter-reset: li;
}

<ul>
<li>colors1</li>
<ol>
<li>green</li>
<li>green</li>
<li>green</li>
<li>green</li>
</ol>
<li>colors2</li>
<ol>
<li>yellow</li>
<li>yellow</li>
<li>yellow</li>
<li>yellow</li>
</ol>
<li>colors3</li>
<ol>
<li>red</li>
<li>red</li>
<li>red</li>
</ol>
<li>colors4</li>
<ol>
<li>magenta</li>
<li>magenta</li>
<li>magenta</li>
</ol>
</ul>

</ul>

CodePudding user response：

ol {
  padding-left: 10px;
  margin-top: 1em;
  margin-bottom: 1em;
  counter-reset: li;
}

.container>li {
  background-color: yellow;
}

ol>ol>li { 
  padding-left: 10px;
}

li:before {
  counter-increment: li;
  content: counter(li, ".") ". ";
}

<ol >

  <li>colors1</li>
  <ol>
    <li>green</li>
    <li>green</li>
  </ol>


  <li>colors2</li>
  <ol>
    <li>yellow</li>
    <li>yellow</li>
  </ol>



  <li>colors3</li>
  <ol>
    <li>red</li>
    <li>red</li>
    <li>red</li>
  </ol>
  
</ol>