有些时候我们需要使用CSS自己去生成序列号，可以使用CSS的 counter-reset 加 counter-increment 来实现：

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>
  <li>XiaoMi</li>
  <li>HuaWei</li>
  <li>IphoneX</li>
  <li>Iphone7</li>
</ul>

<table>
 <tr>
  <td>XiaoMi</td>
 </tr>
 <tr>
  <td>HuaWei</td>
 </tr>
 <tr>
  <td>IphoneX</td>
 </tr>
 <tr>
  <td>Iphone7</td>
 </tr>
</table>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul { 
   list-style-type:none;         
   counter-reset:sectioncounter; 
}                       
ul li:before { 
   content: counter(sectioncounter) ". ";  
   counter-increment:sectioncounter; 
} 

table {        
   counter-reset:sectioncounter; 
}                       
table td:before { 
   content: counter(sectioncounter) ". ";  
   counter-increment:sectioncounter; 
}

在线演示

https://jsfiddle.net/duliu1990/3eg6cbqL/2/