纯 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/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

Windows 局域网共享一键修复 OKShare.bat

Windows 局域网共享一键修复批处理,兼容 Windows 10。OKShare.bat 可一键修复各种网络共享失败问题,如:本机共享无法被访问、无法访问别人共享,无法共享打印机,网络邻居、工作组无法浏览或打开缓慢等问题。 主要功能 查看网络信息 简单共享(无密码) 密码共享 共享和权限设置 …
浏览: 109 标签:  ,  ,  ,  ,  , 

1800年至2100年最早和最晚春节

为搞清春节日期最早和最晚分别会在什么时候出现,就自己编程计算了下,搜索了从1600年至2100年的所有年份,发现最早的春节出现在1月21日,而最晚的春节则出现在2月20日。其中,上一个春节日期极值点位于1985年的2月20日,下一个极值点则要到2061年的1月21日。 1800年至2100年所有春节日期(标有★号…
浏览: 35 标签:  ,  ,  ,  ,  , 

MagicBook Pro 锐龙版 Linux 版 Win 10 无线网卡驱动

MagicBook Pro 锐龙版 Linux版 AMD R5 集显 8GB+512GB (HLY-W19RL),亲测安装 Win 10 LTSB 2016、Win 10 1903,均无法安装到无线网卡驱动,比较坑的是找客服,因为自带 Linux,不提供 Windows 版本驱动。(其实是没有选对型号) 无法确定型号可以到官网查询保修信息来确定:荣耀笔记本产品保修状态…
浏览: 82 标签:  ,  ,  , 
浏览: 42 标签:  , 

Comments:0

发表留言

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