纯 css 实现段落标题自动编号

0 Comment

我们写文档通常会把内容分成若干个段落,每个段落都有一个标题,按级别分别使用 h1/h2/h3 标签。为了理清段落之间关系,我们会给各个标题前加上编号。

比如:

<h1>1. 编程语言</h1>
……
<h2>1.1 C++</h2>
<h2>1.2 Python</h2>

手动维护编号很粗暴很累人,如果位置靠前的某个段落被删除,那么几乎每个段落编号都要手动修改一次。而使用 css 来实现自动编号,就可以避免这个麻烦。

css 中 counter-reset 可以创建一个计数器;counter-increment 可以自动将计数器加1。然后,只需要用 counter 获取计数器值,把它填写在 content 中即可。

实现代码:

body {
counter-reset: chapter;
}

h1 {
counter-reset: section;
}
h1:before {
counter-increment: chapter;
content: counter(chapter) ". ";
}

h2 {
counter-reset: subsection;
}
h2:before {
counter-increment: section;
content: counter(chapter) "." counter(section) " ";
}

h3:before {
counter-increment: subsection;
content: counter(chapter) "." counter(section) "." counter(subsection) " ";
}

原文:大象的博客 - 使用 css 实现自动计算段落编号

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/797/AMP 加速版本」,转载请以链接形式注明出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

屏蔽 iPhone iOS iPadOS 系统自动更新OTA 描述文件下载

iOS 12 系统虽然很不错,但是系统更新经常会有"惊喜",日常还是屏蔽系统自动更新(OTA)比较好。不屏蔽的话,晚上睡觉插着电就会自动下载更新包,iOS 12 如果打开自动更新,还会自动安装…… 根据 iPhone iOS iPadOS 系统版本下载描述文件 安装tvOS描述文件之前在「设置」--「通用」--「日期…
浏览: 89 标签:  ,  ,  ,  , 

海盗湾 ThePiratebay 全站备份 38G BT 种子

转载收藏,膜拜 pcbeta 大神dreamxstudio。38.2G 是 BT 种子大小,大约有 2863126 个 BT 种子,基本上相当于有整个海盗湾。 海盗湾 ThePiratebay 全站备份 38G BT 种子简介 抓站网络爬虫 PY 源代码:tpbcatcher@microthread v4.2 海盗湾 ThePiratebay 全站备份 38G BT 种子收藏下载 …
浏览: 146 标签:  ,  ,  , 

飞歌 GS2 AI 智能车机使用/折腾记录

对这个车机要求不高,也就导航,倒车辅助,听听歌。最不爽的是:车没有方向盘控制键(最重要需求是方便调节车机音量大小,一键静音……),而 飞歌 GS2 也没有实体旋钮/按键可以快速调节音量。那为什么还要选择 飞歌 GS2 呢?因为其它牌子也没有找到带实体按键/旋钮的适用车机,同样条件感觉飞歌这个更…
浏览: 55 标签:  , 

Comments:0

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息