css实现各级标题自动编号

本文在博客同步发布,您也可以在这里看到最新的文章

Markdown编辑器大多不会提供分级标题的自动编号功能,但我们可以通过简单的css样式设置实现。

本文介绍了使用css实现各级标题自动编号的方法,本方法同样适用于typora编辑器和wordpress主题。

1 实现效果

本文将实现以下效果:

本文示例

相应html代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实现各级标题自动编号</title></head><body><div id='write'><h1>实现效果</h1><h1>实现思路</h1><h1>应用实例</h1><h2>Typora</h2><h2>WordPress Sakurairo主题</h2></div><p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p></body>
</html>

2 实现思路

2.1 步骤一:编写标题内容

使用h1~h6区域标题标签设置标题内容,标签的具体用法可以参考这篇文档。

本文的示例仅用到前两级标题。

出于设置方便考虑,建议您将含标题在内的文本区域放在一个<div>标签中,就如示例这样做。

2.2 步骤二:设置编号

分为以下三个步骤:

  1. 定义并初始化序号变量
  2. 设置序号增量
  3. 调用序号变量

2.2.1 定义并初始化序号

使用counter-reset属性进行初始化,具体的用法可以参考这篇文档。

1、一级标题

在上一层标签的样式表中初始化。在本例中,在#write的css中初始化。

2、二级即下层标题

在上一级标题的样式表中初始化。

#write {counter-reset: h1
}h1 {counter-reset: h2
}

在代码中,counter-reset属性做了两件事:首先,定义了序号变量h1h2(变量名随您喜好,也可以叫别的);其次,给序号变量设置了一个初始值,默认为1,也可以显式地初始化为其它值,例如下面的代码将序号变量初始化为了5:

h1{counter-reset:h2 5;
}

2.2.2 设置序号增量

counter-increment属性可以使标题编号增加或减少,具体的用法可参考这篇文档。

#write h1{counter-increment: h1;
}
#write h2{counter-increment: h2;
}

以上代码可以使2.2.1中声明的变量自增1。

2.2.3 调用序号变量

使用伪类::before可以对元素的第一个子元素进行设置,结合content属性,可以为第一个子元素添加修饰性的内容。

#write h1::before{counter-increment: h1;content: counter(h1) " ";
}
#write h2::before {counter-increment: h2;content: counter(h1) "." counter(h2) " ";
}

上述代码在2.2.2的基础上添加了::beforecounter属性。

counter属性中,我们通过counter()函数取到相应变量的值,并通过字符串设置连接各级序号的分隔符。

设置好编号格式后,再通过::before伪类将content属性的内容设置为在标题标签之前显示。

这样,就大功告成了。

3 完整代码

完整的h5代码如下所示:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实现各级标题自动编号</title></head><style>#write {counter-reset: h1;}#write h1{counter-reset: h2;}#write h1::before{counter-increment: h1;content: counter(h1) " ";}#write h2::before {counter-increment: h2;content: counter(h1) "." counter(h2) " ";}</style><body><div id='write'><h1>实现效果</h1><h1>实现思路</h1><h1>应用实例</h1><h2>Typora</h2><h2>WordPress Sakurairo主题</h2></div><p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p></body>
</html>

上述代码可以在菜鸟教程在线编辑器 (runoob.com)在线测试,验证本文示例的效果。

4 应用实例

4.1 Typora

代码添加位置:主题目录下的base.user.css文件。

#write {counter-reset: h1
}h1 {counter-reset: h2
}h2 {counter-reset: h3
}h3 {counter-reset: h4
}h4 {counter-reset: h5
}h5 {counter-reset: h6
}/** put counter result into headings */
#write h1:before {counter-increment: h1;content: counter(h1) " "
}#write h2:before {counter-increment: h2;content: counter(h1) "." counter(h2) " "
}#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {counter-increment: h3;content: counter(h1) "." counter(h2) "." counter(h3) " "
}#write h4:before,
h4.md-focus.md-heading:before {counter-increment: h4;content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}#write h5:before,
h5.md-focus.md-heading:before {counter-increment: h5;content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}#write h6:before,
h6.md-focus.md-heading:before {counter-increment: h6;content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}/** override the default style for focused headings */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {color: inherit;border: inherit;border-radius: inherit;position: inherit;left:initial;float: none;top:initial;font-size: inherit;padding-left: inherit;padding-right: inherit;vertical-align: inherit;font-weight: inherit;line-height: inherit;
}

官方文档:Auto Numbering for Headings - Typora Support

4.2 WordPress Sakurairo主题

代码添加位置:css/theme/sakura.css,可以在”后台-外观-主题文件编辑器“或登录服务器进行修改。

/* 文章标题自动编号 */
.post  .entry-content{counter-reset: h1Counter;
}
.post  .entry-content h1{counter-reset: h2Counter;
}
.post  .entry-content h2{counter-reset: h3Counter;}
.post  .entry-content h3{counter-reset: h4Counter;}
.post  .entry-content h4{counter-reset: h5Counter;
}.post  .entry-content h1:before{counter-increment: h1Counter;content: counter(h1Counter) " "
}
.post .entry-content h2:before{counter-increment: h2Counter;content: counter(h1Counter) "." counter(h2Counter) " "}
.post  .entry-content h3:before{counter-increment: h3Counter;content: counter(h1Counter) "." counter(h2Counter)"." counter(h3Counter) " "
}
.post .entry-content h4:before{counter-increment: h4Counter;content: counter(h1Counter) "." counter(h2Counter) "." counter(h3Counter) "." counter(h4Counter) " "
}
.post .entry-content h5:before{counter-increment: h5Counter;content: counter(h1Counter) "." counter(h2Counter) "." counter(h3Counter) "." counter(h4Counter) "." counter(h5Counter) " "
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

六角螺母缺陷分类数据集:3440张图像

六角螺母缺陷数据集&#xff1a;包含变形&#xff0c;划痕&#xff0c;断裂&#xff0c;生锈&#xff0c;以及优质螺母图片数据&#xff0c;共计3440张&#xff0c;无标注 一.变形螺母-1839 二.断裂螺母-287 三.划痕螺母-473 四.生锈螺母-529 五.优良螺母-312 适用于CV项目&am…

Flutter之Flex组件布局

目录 Flex属性值 轴向:direction:Axis.horizontal 主轴方向:mainAxisAlignment:MainAxisAlignment.center 交叉轴方向:crossAxisAlignment:CrossAxisAlignment 主轴尺寸:mainAxisSize 文字方向:textDirection:TextDirection 竖直方向排序:verticalDirection:VerticalDir…

灵猫论文好用吗 #媒体#笔记

灵猫论文是一款专门用于论文写作、查重降重的工具&#xff0c;它的使用方便、高效&#xff0c;深受广大论文作者的喜爱。那么&#xff0c;灵猫论文到底好用吗&#xff1f;答案是肯定的&#xff01; 首先&#xff0c;灵猫论文提供了强大的查重降重功能&#xff0c;能够帮助用户快…

MySQL8.0新特性详解及全局优化

文章目录 一、前言二、开窗函数三、新增函数索引四、group by不再隐式排序五、新增降序索引六、binlog日志文件过期时间精确到秒七、undo文件不再使用系统表空间八、默认字符集由latin1变为utf8mb4九、自增变量持久化十、删除了.frm等文件 一、前言 目前MySQL8.0及以上版本在我…

Commitizen:规范化你的 Git 提交信息

简介 在团队协作开发过程中&#xff0c;规范化的 Git 提交信息可以提高代码维护的效率&#xff0c;便于追踪和定位问题。Commitizen 是一个帮助我们规范化 Git 提交信息的工具&#xff0c;它提供了一种交互式的方式来生成符合约定格式的提交信息。 原理 Commitizen 的核心原…

Vue3跟Vue2比,性能真的有所提升吗?

答案是肯定的。 说起Vue3的改进&#xff0c;很多人都会说出响应式的改变&#xff0c;与Vue2相比&#xff0c;Vue3采用了proxy的方式对响应式做了重写&#xff0c;而Vue2则是采用defineProperty的方式将对象的属性进行深度遍历&#xff0c;而这种方式想要实现响应式的前与后&am…

每日学习笔记:C++ STL算法之容器元素复制与搬移

本文API 复制元素&#xff1a; copy() copy_if(....,op) copy_n() copy_backward() 搬移元素&#xff1a; move() move_backward() 复制元素 搬移元素

SQL注入利用学习-Union联合注入

联合注入的原理 在SQL语句中查询数据时&#xff0c;使用select 相关语句与where 条件子句筛选符合条件的记录。 select * from person where id 1; #在person表中&#xff0c;筛选出id1的记录如果该id1 中的1 是用户可以控制输入的部分时&#xff0c;就有可能存在SQL注入漏洞…

Python爬虫与API交互:如何爬取并解析JSON数据

目录 前言 一、什么是API和JSON数据 二、准备环境 三、发送API请求并获取数据 四、解析JSON数据 五、完整代码示例 六、总结 前言 随着互联网的发展&#xff0c;越来越多的网站提供了API接口&#xff0c;供开发者获取实时数据。在爬虫领域中&#xff0c;与API交互并解析…

Pytorch中nn.Linear使用方法

nn.Linear定义一个神经网络的线性层&#xff1a; torch.nn.Linear(in_features, # 输入的神经元个数out_features, # 输出神经元个数biasTrue # 是否包含偏置)nn.Linear其实就是对输入&#xff08;n表示样本数量&#xff0c;i表示样本特…

【数据结构与算法】力扣 142. 环形链表 II

题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第二套

华为海思校园招聘-芯片-数字 IC 方向 题目分享&#xff08;有参考答案&#xff09;——第二套&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadidadidida313&#xff0c;加我备注&#xff1a;CSDN huawei…

Git-LFS 远程命令执行漏洞 CVE-2020-27955 漏洞复现

今天遇到了一个比较有意思的洞&#xff0c;复现一下下.......... 漏洞描述 Git LFS 是 Github 开发的一个 Git 的扩展&#xff0c;用于实现 Git 对大文件的支持 一些受影响的产品包括Git&#xff0c;GitHub CLI&#xff0c;GitHub Desktop&#xff0c;Visual Studio&#xff0…

51单片机之自己配串口寄存器实现波特率9600

本配置是根据手册进行开发配置的 1、首先配置SCON 所以综上所诉 SCON 0x40 &#xff08;0100 0000&#xff09; 2、PCON不用配置 3、配置定时器1 4、波特率的计算 5、配置AUXR 6、对比 7、实现 8、优化&#xff08;实现字符串&#xff09; 引入TI &#xff08;智能延时&…

对于嵌入式工程师,需要掌握的知识是广还是精?

我刚开始接触嵌入式的时候&#xff0c;感觉学这个好变态啊。 要学的东西太多了&#xff0c;数字电路、模拟电路、C语言、汇编、51单片机、Protel 99SE、Pcb Layout、STM32单片机、RTOS、Linux、ARM等等.... 可以说&#xff0c;随便拿个魔法电路出来&#xff0c;想达到精的程度&…

【C++】C++11可变参数模板

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 可变参数模板的定义…

Java绘图坐标体系

一、介绍 下图说明了Java坐标系。坐标原点位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐…

LLM大语言模型(九):LangChain封装自定义的LLM

背景 想基于ChatGLM3-6B用LangChain做LLM应用&#xff0c;需要先了解下LangChain中对LLM的封装。本文以一个hello world的封装来示例。 LangChain中对LLM的封装 继承关系&#xff1a;BaseLanguageModel——》BaseLLM——》LLM LLM类 简化和LLM的交互 _call抽象方法定义 ab…

操作系统理论知识快速总览

操作系统整体架构 搬出考研时的思维导图 操作系统主要分为 批处理系统(老古董&#xff0c;基本不用了)实时操作系统(嵌入式中使用较多&#xff0c;RTOS)分时操作系统(PC中使用较多&#xff0c;Linux&#xff0c;Windows) 分时操作系统和实时操作系统的使用场景不同&#xf…

【蓝桥杯第十二届省赛B】(部分详解)

空间 8位1b 1kb1024b(2^10) 1mb1024kb(2^20) 时间显示 #include <iostream> using LLlong long; using namespace std; int main() {LL t;cin>>t;int HH,MM,SS;t/1000;SSt%60;//like370000ms370s,最后360转成分余下10st/60;MMt%60;t/60;HHt%24;printf("%02d:…