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

Question

我正在使用 CSS 计数器和嵌套的 OL 创建 HTML/CSS 中的目录，效果很好。现在，我想在顶级 OL 上设置一个类“toc”（因为页面上的 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>