如何使用CSS计数器编写CSS选择器以将格式应用于特定元素？

Question

我使用CSS计数器在HTML/CSS中创建了一个目录，并嵌套了OL，这很好用。现在，我想在顶层OL上设置一个“toc”类（因为页面上的OL比目录中的OL多）。

如何调整CSS选择器，使计数器样式仅适用于<ol class="toc">？

如果您从第一个OL中删除class =“toc”，您会看到项目编号如您所期望的那样嵌套......当您添加toc类时，这一切都会发生。如何修复css选择器，以便嵌套的项目编号按预期工作？

<style> 
ol { 
    counter-reset: section;    /* Creates a new instance of the 
              section counter with each ol 
              element */ 
    list-style-type: none; 
    text-decoration:underline; 
} 
li:before { 
    counter-increment: section;   /* Increments only this instance 
              of the section counter */ 
    content: counters(section, ".") " "; /* Adds the value of all instances 
              of the section counter separated 
              by a ".". */ 
    font-weight:bold; 
} 
</style>​ 


<ol class="toc"> 

    <li>item 
    <ol> 
     <li>item 
     <li>item 
      <ol> 
       <li>item 
       <li>item 
       <li>item 
       <li>item 
       <li>item 
      </ol> 
     </li> 
     <li>item 
    </ol> 
</li> 
<li>item 
    <ol> 
     <li>item 
     <li>item 
     <li>item 
     <li>item 
    </ol> 

</li> 
<li>item 
    <ol> 
     <li>item 
     <li>item 
     <li>item 
     <li>item 
     <li>item 
     <li>item 
    </ol> 

</li> 
<li>item 
    <ol> 
     <li>item 
      <ol> 
       <li>item 
       <li>item 
       <li>item 
      </ol> 
     </li> 

     <li>item 
      <ol> 
       <li>item 
       <li>item</li> 
       <li>item 
       <li>item 
       <li>item 
       <li>item</li> 
      </ol> 
     </li> 
     <li>item 
      <ol> 
       <li>item</li> 
       <li>item</li> 
      </ol> 
    </ol> 
</li> 
</ol>​ 

Answer 1

<style> 
ol { color:black; } 

ol.parentol { color:red; } 

ol.childol { color:green; } 

/* nested ols with class of 'childol' 
    will not inherit the red font color */ 
</style> 
<ol> 
    <li>zzzzz</li> 
    <li> 
    <ol class="parentol"> 
     <li>aaaa</li> 
     <li> 
     <ol class="childol"> 
     <li>bbb</li> 
     </ol> 
     </li> 
    </ol> 
</li> 
</ol>