如何使用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>