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

甘竹牌精装豆鼓鲮鱼罐头鱼小吃下饭菜储备

甘竹罐头,甘香可口。广东甘竹罐头有限公司始创于1988年,专业的罐头生产经验,生产鱼罐头、玉米罐头,肉罐头,豆类罐头等多种罐头,产品销往全国。 甘竹牌精装豆鼓鲮鱼罐头鱼 淘宝官方店铺:甘竹牌 甘竹官方 精装豆鼓鲮鱼罐头鱼227*4罐鱼干小吃下饭菜储备(¥60) 零添加 成份 …
浏览: 131 标签:  ,  ,  ,  ,  , 

日常生活用品食品药品物资应急储备

收集自网络,仅供参考。 应急食品储备 北戴河(BDH)900 铁听压缩饼干 200g*20包 鹰金钱 茄汁黄豆罐头198g 香纳兰 纯正泰国香米2.5kg(进口原粮 泰米 大米) 香纳兰 泰国香米 泰国茉莉香米 5kg(原装进口 泰米 ) 万字 纯酿造酱油 1.8L 甘竹牌-精装豆鼓鲮鱼罐头鱼227*4罐鱼干小…
浏览: 22 标签:  , 

N95 口罩如何消毒/重复利用?

最近因为疫情,想必不少人(包括老杨)为口罩犯愁。别说 N95 口罩,就是普通医用外科口罩都难买到。 买不到只能省点用,循环利用。循环用肯定得先消毒。 温馨提示:方法仅供参考,后果自负! N95 口罩如何消毒? 高温、水煮,肯定是不行的。网上有专家说隔水蒸……可行?老杨觉得不靠谱。 …
浏览: 109 标签:  ,  ,  ,  , 
浏览: 40 标签:  , 

Comments:0

发表留言

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