IT评测·应用市场-qidao123.com技术社区

标题: 用css给div列表加个序号 [打印本页]

---

作者: 老婆出轨    时间: 2025-4-16 19:37
标题: 用css给div列表加个序号
用 CSS 的 counter 相关属性来为列表添加序号。以下是具体的代码，我将以 HTML 文件的情势提供，而且会运行展示效果：

1. .as-div {
2.     // counter-reset: my-counter; /* 计数器名称是'my-counter' */
3.     // counter-reset: small-apple; /* 计数器名称是'small-apple' */
4.     // counter-reset: small-apple 2; /* 计数器名称是'small-apple', 并且默认起始值是2 */
5.     // counter-reset: number 1;// 从2+
6.     counter-reset: number;
7. }
8. .as-li::before {
9.     counter-increment: number;
10.     content: counter(number) '. ';
11.     // counter-increment: my-counter;
12.     // content: counter(my-counter, upper-roman) '. ';
13.     // content: counter(my-counter, lower-alpha) '. ';
14. }

复制代码

1.     <div class="as-div">
2.         <div class="as-li">ceshi</div>
3.         <div class="as-li">ceshi</div>
4.         <div class="as-li">ceshi</div>
5.         <div class="as-li">ceshi</div>
6.         <div class="as-li">ceshi</div>
7.     </div>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4