php编号累加技巧_只用层叠样式表CSS帮你实现自动编号计数器功能上

文章目录 [+]

各位前端爱好者，你们好！
本日这篇文章实在是 CSS 的 content 属性取值研究的第一篇文章，打算写个几篇，用一个系列的文章，给大家好好讲解一下 CSS 里最常用的 Pseudo-elements(伪元素) ::before 和 ::after 定义中，content 属性的取值问题。
众所周知，在定义伪元素 ::before 和 ::after 的样式时，是不能短缺 content 属性的，否则设置将无效。
本日将给大家先容利用 content 对网页内容进行自动编号的小技巧，给给为拾漏补缺一下。

初步先容：
在 CSS 的学习中，我们大部分初学者都不会对这两个有关计数的属性有太多的认识和理解，那便是 counter-reset 和 counter-increment：
counter-reset: 声明一个计数器变量，并初始化默认值。
counter-increment: 递增或递减该计数器的值。
以下我们所讲述的内容，将都会环绕这两个属性展开，没有它们，我们就没法利用 CSS 的自动计数功能了。
（图片来自网络侵删）
大略示例：
我们就先不看 MDN 里的一大段 Syntax 了，来一段大略的 DEMO 给大家演示演示：
HTML 代码
<h6>HTML and CSS</h6><h6>JavaScript</h6><h6>PHP</h6><h6>Java</h6>
CSS 代码
body { / 重置 section 计数器为 0 / counter-reset: section;}h6::before { / 增加计数器值 / counter-increment: section; / 显示计数器 / content: "Section " counter(section) ": ";}
那么这段 HTML 样式看上去该当是这个样子的：
Section 1: HTML and CSS
Section 2: JavaScript
Section 3: PHP
Section 4: Java
嗯，我们用了一个伪元素 ::before 的 content 输出内容，用一个 counter() 方法将自动累计的编号输出，例子中只用了 CSS 代码就帮你把同类型标题编号了，你品，你细品，纯 CSS 的自动计数器用起来便是这么大略。
进阶示例：
以上便是最基本的计数器利用，下面我们来看一个轻微繁芜一点的例子，这里我们用两个计数器来实现二级自动编号：
HTML 代码
<h5>Programming languages</h5><h6>HTML and CSS</h6><h6>JavaScript</h6><h6>PHP</h6><h6>Java</h6><h5>Database management systems</h5><h6>MySQL</h6><h6>MariaDB</h6><h6>PostgreSQL</h6><h6>Oracle</h6>
CSS 代码
body { counter-reset: chapter; }h5 { counter-reset: section; counter-increment: chapter;}h6 { counter-increment: section;}h5::before { content: "Chapter " counter(chapter) ". ";}h6::before { content: counter(chapter) "." counter(section) " ";}
这段 HTML 显示效果如下：
Chapter 1. Programming languages
1.1 HTML and CSS
1.2 JavaScript
1.3 PHP
1.4 Java
Chapter 2. Database management systems
2.1 MySQL
2.2 MariaDB
2.3 PostgreSQL
2.4 Oracle
这里请把稳一下两个 counter-reset 设置的机遇，同时我们可以看到，counter-increment 可以设置在容器本身，也可以设置在自己的伪元素中，都行！
贪多不消化，初学者们，我们本日就先讲到这里，下一篇文章将会讲讲 counter-reset 、counter-increment 和 counter() 的进阶用法，还有末了那位的兄弟 counters() ，看看利用这些属性，我们还能做些什么故意思的样式？

标签：counter gt