css li也可以製作有階層的章節目錄


html

<ul>
  <li>cheapter 1
    <ul>
       <li>cheapter 1.1</li>
       <li>cheapter 1.2</li>
    </ul>
  </li>
  <li>cheapter 2
    <ul>
       <li>cheapter 2.1</li>
       <li>cheapter 2.2</li>
    </ul>
  </li>
</ul>

CSS

ul {
	list-style-type: none;
	counter-reset: cheapter;
	/*counter-reset: cheapter(自定變數);*/
}
ul > li {
	counter-increment: cheapter;
}
ul > li:before {
	content: counter(cheapter);
}
ul ul {
	list-style-type: none;
	counter-reset: unit;/*counter-reset: unit(自定變數);*/
}
ul ul > li {
	counter-increment: unit;
}
ul ul > li:before {
	content: counter(cheapter) "." counter(unit);
}