为什么 css 规则对列表中的第一项无效？答案

【问题标题】：Why is the css rule not valid for the first item in the list?为什么 css 规则对列表中的第一项无效？
【发布时间】：2022-01-22 19:13:32
【问题描述】：

为什么 css 规则对列表中的第一项无效？为什么 css 规则对列表中的第一项无效？为什么 css 规则对列表中的第一项无效？为什么 css 规则对列表中的第一项无效？

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>

为什么该规则对列表中的第一项无效？

【问题讨论】：

您的第一个li 不跟随ol，它是一个的孩子。例如，如果您这样做了，您当前的代码就可以工作（尽管这不是解决方案）。 <ol><ol></ol><li>colors1</li>...

标签： css list

【解决方案1】：

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>

【讨论】：

我分享了一些解决方案，但可能并不理想。

【解决方案2】：

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 class="container">

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

【讨论】：