自動番号振りのレンダリング

<style type="text/css"><!--
h1, h2 {font-size:medium; margin:0; padding:0;}

h1:before {
content:"第" counter(chapter) "章　";
counter-increment:chapter;
counter-reset:section;
}
h2:before {
content:"第" counter(chapter) "章　第" counter(section) "節　";
counter-increment:section;
}
--></style>

<h1>ビジュアル効果</h1>
<h2>はみ出し部分の表示方法</h2>
<h2>見える範囲の指定</h2>
<h2>表示、非表示</h2>
<h1>ユーザーインターフェース</h1>
<h2>カーソル</h2>
<h2>アウトライン</h2>

h1:before {counter-reset:visuNum -1;}
h1:before {counter-reset:userNum 99;}

カウンタ名「userNum」だけの初期化を行ってしまいます。両者を初期化するにはまとめて指定します。

h1:before {counter-reset:visuNum -1 userNum 99;}

<style type="text/css"><!--
ol {counter-reset:item; list-style:none;}
li:before {content:counter(item) ". "; counter-increment:item;}
--></style>

<ol>
<li>ビジュアル効果
  <ol>
  <li>はみ出し部分の表示方法</li>
  <li>見える範囲の指定</li>
  <li>表示、非表示</li>
  </ol>
</li>
<li>ユーザーインターフェース
  <ol>
  <li>カーソル</li>
  <li>アウトライン</li>
  </ol>
</li>
</ol>

<style type="text/css"><!--
ol {counter-reset:item; list-style:none;}
li:before {content:counters(item, "."); counter-increment:item;}
--></style>

<ol>
<li> ビジュアル効果
  <ol>
  <li> はみ出し部分の表示方法</li>
  <li> 見える範囲の指定</li>
  <li> 表示、非表示</li>
  </ol>
</li>
<li> ユーザーインターフェース
  <ol>
  <li> カーソル</li>
  <li> アウトライン</li>
  </ol>
</li>
</ol>