CSS如何给列表项添加自定义序号_使用counter计数器属性实现
原生 ol 无法满足复杂编号需求，必须用 CSS counter 系统
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
当您需要在网页中为列表项添加自定义序号时，是否发现原生的 ol 标签功能有限？它仅能提供基础的阿拉伯数字编号。一旦面对更复杂的场景，例如需要实现跨列表连续编号、在序号前后插入文字或图标，或者生成诸如「第1章」、「附录A-1」等特殊格式，原生有序列表就显得力不从心了。
此时，CSS 的 counter 计数器系统便成为理想的解决方案。这套方法不依赖于特定的 HTML 标记，完全通过样式表控制计数逻辑，从而提供了极高的灵活性与定制能力。
为什么直接用 ol 不够用？
其根本原因在于，ol 生成的序号是一个不可拆分的语义化整体。开发者无法将序号与内容分离以进行独立的样式定位，也无法让序号在多个独立的列表容器间连续递增。此外，在序号前后添加前缀、后缀或图标，或者根据条件动态切换样式，都超出了原生有序列表的能力范围。因此，对于上述定制化编号需求，CSS counter 几乎是当前 Web 标准下的唯一选择。
counter-reset 和 counter-increment 怎么配对写？
要使计数器正常工作，counter-reset 和 counter-increment 这两个属性必须配对使用，缺一不可。您可以这样理解：counter-reset 负责初始化一个计数器（类似于声明变量 let i = 0），而 counter-increment 则在每个需要计数的元素上触发其值递增（相当于执行 i++）。它们通常不会写在同一个选择器内。
- 在父级容器（例如
ul或ol）上使用counter-reset: section;来创建一个名为“section”的计数器。 - 在每个子项（例如
li）上使用counter-increment: section;，使计数器在每个列表项前自动增加。 - 若希望从5开始计数，可写作
counter-reset: section 4;（请注意，此处设置的是“初始值减1”）。 - 此系统支持多个计数器同时运行，例如
counter-reset: chapter section;，它们会各自独立维护计数值。
如何用 counter() 函数渲染序号？
计数器递增后，序号并不会自动显示在页面上。您需要通过 ::before 伪元素配合 content 属性，调用 counter() 函数来输出序号。这一步是常见的出错点：遗漏 content 属性、拼错函数名，或忘记为伪元素设置 display 属性（这可能导致其不参与布局），都会使序号无法显示。
立即学习“前端免费学习笔记（深入）”；
li::before {
content: counter(section) ". ";
font-weight: bold;
}
counter() 函数还可接受第二个参数，用于指定序号的显示格式。例如，counter(section, upper-alpha) 将输出 A、B、C；counter(section, lower-roman) 将输出 i、ii、iii；默认格式为 decimal，即阿拉伯数字。
嵌套列表怎么保持层级编号？
要实现如「1.1」、「1.2」、「2.1」等多层级的嵌套编号，仅靠单一计数器是无法完成的。您需要为每一层级分别定义并管理独立的计数器：
- 在外层
ul上设置counter-reset: outer;，初始化外层计数器。 - 在内层
ul上设置counter-reset: inner;，初始化内层计数器。 - 在外层的每个
li上，同时设置counter-increment: outer;（递增外层计数）和counter-reset: inner;（重置内层计数器，为下一组子项做准备）。 - 在内层的每个
li上，设置counter-increment: inner;，递增内层计数。 - 最后，在内层
li的::before伪元素中，通过content: counter(outer) "." counter(inner) " ";将两层计数合并输出。
这里有一个关键细节需要注意：在子元素上书写 counter-reset 不会影响父级计数器的当前值，但会覆盖从父级继承而来的初始值。若忽略此特性，很容易导致嵌套编号出现意料之外的错乱。
相关攻略
Firefox 不支持 font-smooth 属性，仅支持 -moz-osx-font-smoothing（仅 macOS 有效）和 -webkit-font-smoothing（WebKit Blink 内核有效），二者作用机制与取值效果需严格区分。 Firefox 浏览器不支持 font-sm
原理是：元素宽高为0时，仅一侧设非透明边框、其余三边透明，浏览器将四边交点斜向收拢形成等腰直角三角形；底边长≈边框宽×√2，方向由有色边框决定。 用 border 宽度和透明色生成三角形的原理是什么 Tailwind CSS 框架本身并未内置专门的三角形工具类，但这恰恰为我们提供了利用 CSS 底层
CSS如何组织复杂的SASS LESS代码：结合BEM结构进行嵌套重构 BEM方法论严格禁止深层嵌套，其核心在于切断样式对DOM结构的依赖链。元素与修饰符必须直接关联块名，任何与DOM层级耦合、产生冗余选择器或错误绑定修饰符的做法都应避免。应通过文件拆分、@layer分层、 when守卫等机制，确保
CSS如何实现平滑滚动效果_scroll-beha vior属性的应用场景 想实现页面内锚点跳转的平滑滚动？很多人第一反应就是那句经典的 scroll-beha vior: smooth。没错，一行CSS确实能带来丝滑的体验，但这里有个关键前提：它只对原生的 链接和 Ja vaScript 的 el
CSS滤镜与动态视觉处理：从生效到性能的实战指南 想让页面元素拥有模糊、阴影或色彩调整等视觉效果，CSS的filter和backdrop-filter属性是绕不开的工具。但实际用起来，你会发现它们有点“脾气”——明明代码写对了，效果却不出来，或者页面突然变得卡顿。今天，我们就来聊聊这些属性怎么写才能
热门专题
热门推荐
MySQL主从延迟：别被“0延迟”骗了，这才是真实监控与排查指南 说起MySQL主从延迟，很多人的第一反应就是去查SHOW SLA VE STATUS里的那个Seconds_Behind_Master。但经验告诉我们，这个最显眼的数字，往往也是最会“撒谎”的。它明明显示为0，业务侧却反馈数据没同步过
MySQL GET_LOCK()：一个被误解的“分布式锁”工具 MySQL GET_LOCK() 能不能当分布式锁用 开门见山地说，直接把它当作生产级的分布式锁来用，风险极高。这个函数的设计初衷，其实是为了在单个MySQL实例内部，进行一些轻量级的协作控制。为什么这么说？原因很具体：首先，GET_L
mysql如何查看当前执行的进程_使用show processlist查看状态 show processlist 返回的 State 字段到底代表什么 首先得澄清一个普遍的误解：State 字段显示的可不是什么“进程状态”，它真正揭示的，是当前线程在执行 SQL 时，其内部正处于哪个**具体的工作阶
在加密货币那个充满野性与想象力的世界里，“屎币”（Shiba Inu）和狗狗币（Dogecoin）绝对是两个无法被忽视的“异类”。它们从网络迷因中诞生，因社区狂欢而崛起，最终在残酷的市场博弈中，演化出了一套属于自己的独特生存法则。这套法则既包含了加密货币的底层逻辑，又被“去中心化”、“社区驱动”这些
MySQL访问控制：GRANT与防火墙的协同策略 MySQL GRANT 语句中指定 IP 时，为什么 localhost 和 127 0 0 1 不等价？ 这里有个关键细节常被忽略：MySQL的用户账户其实是一个二元组，由 user @ host 共同构成。其中， localhost 是一个特殊标