CSS - Нумерованный многоуровневый список

2011-03-17
CSS

Например, необходимо получить такой список:

1. one
    1.1. one-two
    1.2. one-three
2. two
3. three
    3.1. three-one
    3.2. three-two
    3.3. three-three

Это можно сделать так:

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

<ol>
  <li>
    one
    <ol>
      <li>one-two</li>
      <li>one-three</li>
    </ol>
  </li>
  <li>
    two
  </li>
  <li>
    three
    <ol>
      <li>three-one</li>
      <li>three-two</li>
      <li>three-three</li>
    </ol>
  </li>
</ol>