CSSでHTMLのh1-6タグの節見出しに1.1 形式の番号付け

HTMLで文章を書くときに，1.1のようにh1からh6タグの見出しに番号を付けたかった。以下のサイトを参考にやってみた。

参考：見出しに番号を付けた(Livedoorブログの場合) : 或る阿呆の記 http://blog.livedoor.jp/hack_le/archives/40193456.html
上記サイトでは以下のようにh2タグ要素にCSSでcounter-incrementとcounter-resetを使ってカウンタの増加・リセットにより実現している。

h2 {
 counter-increment: section2;
 counter-reset: section3;
}
h3 {
 counter-increment: section3;
}
h3:before {
 content: counter(section2) "." counter(section3) ". ";
}

これを使ってh1からh6タグに以下のように番号がつくようにCSSを書いた。
1 見出し1
1.1 見出し2
1.1.1 見出し3
1.1.1.1 見出し4
1.1.1.1.1 見出し5
1.1.1.1.1.1 見出し6

以下のコードをCSSかheadタグのstyleタグ内に書けば実現される。

/* 節番号の設定 */
  h1 {counter-increment: section1; counter-reset: section2;}
  h1:before {content: counter(section1) " ";}
  
  h2 {counter-increment: section2; counter-reset: section3;}
  h2:before {content: counter(section1) "." counter(section2) " ";}
  
  h3 {counter-increment: section3; counter-reset: section4;}
  h3:before {content: counter(section1) "." counter(section2) "." counter(section3) " ";}
  
  h4 {counter-increment: section4; counter-reset: section5;}
  h4:before {content: counter(section1) "." counter(section2) "." counter(section3)
            "." counter(section4) " "}
  
  h5 {counter-increment: section5; counter-reset: section6;}
  h5:before {content: counter(section1) "." counter(section2) "." counter(section3)
            "." counter(section4) "." counter(section5) " ";}
  
  h6 {counter-increment: section6;}
  h6:before {content: counter(section1) "." counter(section2) "." counter(section3)
            "." counter(section4) "." counter(section5) " ";}