方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

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

效果

  1. li element
    1. sub li element
    2. sub li element
    3. sub li element
  2. li element
  3. li element
    1. sub li element
    2. sub li element
    3. sub li element

节标题的改造

1
2
3
4
5
6
h1 {
  counter-increment: counter_h1;
}
h1::before {
  content: counter(counter_h1);
}

参考文献

https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1