0

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

1 に答える 1

0 
<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>
于 2012-05-15T19:15:54.110 に答える