CSS 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。
使用计数器自动编号
CSS 计数器根据规则来递增变量。
CSS 计数器使用到以下几个属性：
counter-reset- 创建或者重置计数器counter-increment- 递增变量content- 插入生成的内容counter()或counters()函数 - 将计数器的值添加到元素
案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body { # 这里一定要写在body下
counter-reset: section;
}
h2::before { # 这里可以随意指定标签或者类或者ID
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>使用 CSS 计数器:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>
<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>
</body>
</html>
案列2
{% extends 'query.html' %}
{% block content %}
<style>
body {
counter-reset: number;
}
li:before {
counter-increment: number;
content: "序号：" counter(number);
}
</style>
<body>
{% for user_info in user_one %}
<div style="height: auto; 1000px;margin: 0;">
<ul class="list-group">
<li style="font-size: 14px;" class="list-group-item"> -- 姓名：{{ user_info.name }} / 性别：{{ user_info.sex }} /
生日：{{ user_info.birthday }} /
电话：{{ user_info.user_info.phone }} / 地址：{{ user_info.user_info.addr }} --</li>
</ul>
</div>
</body>
{% endfor %}
{% endblock %}