在HTML5中，项目列表可以通过<ol>标签创建有序列表，并且可以使用<li>标签来定义列表项。有序列表中的序号可以通过浏览器自动生成，但如果你需要自定义序号或者使用不同的序号风格，你可以通过CSS来实现。
以下是一个HTML5项目列表序号代码实例，其中包括了使用CSS自定义序号的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 项目列表序号实例</title>
<style>
/* 自定义有序列表的样式 */
ol.custom-numeric {
counter-reset: custom-numeric; /* 创建一个新的计数器 */
}
ol.custom-numeric li {
list-style-type: none; /* 移除默认的列表符号 */
margin-bottom: 10px;
}
ol.custom-numeric li::before {
content: counter(custom-numeric) ". "; /* 在列表项前插入计数器 */
counter-increment: custom-numeric; /* 增加计数器的值 */
font-weight: bold; /* 可以选择加粗计数器 */
}
</style>
</head>
<body>
<ol class="custom-numeric">
<li>项目一：这是一个自定义序号的项目列表项。</li>
<li>项目二：这里是第二个项目，也使用了自定义序号。</li>
<li>项目三：继续使用自定义序号，让列表看起来更加独特。</li>
</ol>
</body>
</html>
在这个例子中，我们创建了一个有序列表，并给它添加了一个类名custom-numeric。在<style>标签中，我们定义了.custom-numeric类的样式，其中包括以下关键点：
- 使用
counter-reset属性创建了一个新的计数器，名为custom-numeric。 - 通过
list-style-type: none;移除了默认的列表符号。 - 使用
::before伪元素在列表项前插入计数器值，计数器是通过counter(custom-numeric)和counter-increment: custom-numeric;实现的。 - 可以根据需要调整计数器前缀（例如使用”.“或者”1.“）和样式（如字体加粗）。
运行这段代码，你将看到一个有序列表，每个列表项前的序号都是通过CSS自定义的。