这次给大家带来css的counters属性详解，使用css的counters属性注意事项有哪些，下面就是实战案例，一起来看一下。
counter-reset：此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义。
counter-increment：用来标识计数器与实际相关联的范围。
content：用来生成内容，其为:before、:after或::before、::after的一个属性。在生成计数器内容，主要配合counter()一起使用。
counter()：该函数用来设置插入计数器的值。
:before、:after或::before、::after：配合content用来生成计数器内容。
mdn的例子：
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>counters()函数_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /><style>ol { margin: 0; padding: 0 0 0 2em; list-style: none; counter-reset: item;
}li:before { counter-increment: item; content: counters(item, "."); color: #f00;
}</style></head><body><ol class="test">
<li>Node <ol>
<li>Node <ol>
<li>Node</li>
<li>Node</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
</ol>
</li>
<li>Node</li>
<li>Node</li></ol></body></html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
立即学习“前端免费学习笔记（深入）”；
以上就是css的Counters属性详解的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
207
