Posted on | by liu
CSS 序号显示是一种常用的网页设计方法，可以使列表、表格等内容变得更加清晰易读。在 CSS 中，可以通过设置 list-style-type 属性来定义列表项的序号显示方式。下面是一个使用了 CSS 序号显示的列表实例：
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
如果要设置序号显示为阿拉伯数字，可以在样式表中添加以下代码：
ul {
list-style-type: decimal;
}这样，列表项就会按照 1、2、3… 的顺序进行编号。同理，如果要使用罗马数字进行编号，可以将 list-style-type 设置为 “lower-roman” 或 “upper-roman”，如下所示：
ul {
list-style-type: lower-roman;
}其他常用的序号显示方式还包括：
- disc – 实心圆点（默认值）
- circle – 空心圆点
- square – 实心方块
- lower-alpha – 小写字母（a、b、c…）
- upper-alpha – 大写字母（A、B、C…）
除了列表，表格的序号显示也可以通过 CSS 来实现。在表格中，通常会使用序号来对行或列进行标号。为了设置表格序号显示，可以使用 :before 伪元素来插入序号内容。下面是一个示例：
<table>
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td></td>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>
为了插入序号，可以添加以下样式：
tbody tr:before {
content: counter(row);
counter-increment: row;
}这样，表格中每一行前面都会自动插入一个序号。需要注意的是，在 CSS 样式中可以使用 counter() 函数来控制计数器的值，从而实现更为灵活的样式设置。
总之，CSS 序号显示是一种简单而实用的网页设计方法，可以提高内容的可读性和可视化效果。在实际操作中，需要根据具体需求选择合适的序号显示方式，并结合其他 CSS 特性来实现更为优美的页面效果。