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) " "
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt案例 通过调用Setupapi.h库实现对设备管理器中设备默认驱动的备份

参考腾讯电脑管家-软件市场中的驱动备份专家写的一个驱动备份软件案例&#xff0c;学习Setupapi.h库中的函数使用.通过Setupapi.h库读取设备管理器中安装的设备获取安装的驱动列表&#xff0c;通过bit7z库备份驱动目录下的所有文件. 目录导读 实现效果相关内容示例获取SP_DRVIN…

计算机网络-运输层

运输层 湖科大计算机网络 参考笔记&#xff0c;如有侵权联系删除 概述 运输层的任务&#xff1a;如何为运行在不同主机上的应用进程提供直接的通信服务 运输层协议又称端到端协议 运输层使应用进程看见的好像是在两个运输层实体之间有一条端到端的逻辑通信信道 运输层为应…

Github上传大文件(>25MB)教程

0.在github中创建新的项目&#xff08;已创建可忽略这一步&#xff09; 如上图所示&#xff0c;点击New repository 进入如下页面&#xff1a; 1.下载Git LFS 下载git 2.打开gitbash 3.上传文件&#xff0c;代码如下: cd upload #进入名为upload的文件夹&#xff0c;提前…

k8s集群node节点状态为Not Ready

目录 一、Node节点Not Ready状态的可能原因 二、排查node节点状态为Not Ready的原因 一、Node节点Not Ready状态的可能原因 node节点状态为Not Ready可能的原因有&#xff1a; 1.网络插件出问题 有过安装经验的小伙伴应该很熟悉未安装网络插件的情况下node节点在集群中的状…

【MacOs】proxychains配置使用

一、开始 1. 安装proxychains 使用brew进行安装 brew install proxychains-ng没有homebrew的&#xff0c;可以使用该命令安装 /usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"2. 配置代理配置文件 cd /opt/homeb…

AUTOSAR配置工具开发教程 - 开篇

简介 本系列的教程&#xff0c;主要讲述如何自己开发一套简单的AUTOSAR ECU配置工具。适用于有C# WPF基础的人员。 简易介绍见&#xff1a;如何打造AUTOSAR工具_autosar_mod_ecuconfigurationparameters-CSDN博客 实现版本 AUTOSAR 4.0.3AUTOSAR 4.2.2AUTOSAR 4.4.0 效果 …

麻雀优化算法(Sparrow Search Algorithm)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法背景 麻雀算法&#xff08;Sparrow Search Algorithm, SSA&#xff09;是一种受自然界麻雀群体行为启发的优化算法。想象一下&#xff0c;一…

Linux学习-网络UDP

网络 数据传输,数据共享 网络协议模型 OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据报、流式&#…

esp32上PWM呼吸灯

1、什么是pwm PWM&#xff08;Pulse Width Modulation&#xff09;简称脉宽调制&#xff0c;是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术&#xff0c;广泛应用在测量、通信、工控等方面。 1.1频率 单位时间内PWM方波重复的次数 1.2占空比 一个周期内…

HarmonyOS 应用开发-根据icon自适应背景颜色

介绍 本示例将介绍如何根据图片设置自适应的背景色。 效果图预览 使用说明 转换图片为PixelMap&#xff0c;取出所有像素值遍历所有像素值&#xff0c;查找到出现次数最多的像素&#xff0c;即为图片的主要颜色适当修改图片的主要颜色&#xff0c;作为自适应的背景色 实现思…

云岚到家项目

一.项目介绍 云岚到家项目是一个家政服务o2o平台&#xff0c;互联网家政是继打车、外卖后的又一个风口&#xff0c;创业者众多&#xff0c;比如&#xff1a;58到家&#xff0c;天鹅到家等&#xff0c;o2o&#xff08;Online To Offline&#xff09;是将线下商务的机会与互联网…

负荷预测 | Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测&#xff1b; 2.单变量时间序列数据集&#xff0c;采用前12个时刻预测未来96个时刻的数据&#xff1b; 3.excel数据方便替换&#xff0c;运行环境matlab…

高端大气自适应全屏酷炫渐变卡片html源码图片切换特效html5源码导航引导网站源码

源码特点&#xff1a; 1&#xff1a;手工书写DIVCSS、代码精简无冗余。 2&#xff1a;自适应结构&#xff0c;全球先进技术&#xff0c;高端视觉体验。 3&#xff1a;SEO框架布局&#xff0c;栏目及文章页均可独立设置标题/关键词/描述。 4&#xff1a;附带测试数据、安装教程、…

说说对WebSocket的理解?应用场景?

一、是什么 WebSocket&#xff0c;是一种网络传输协议&#xff0c;位于OSI模型的应用层。可在单个TCP连接上进行全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通迅 客户端和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c…

flutter组件_AlertDialog

官方说明&#xff1a;A Material Design alert dialog. 翻译&#xff1a;一个材料设计警告对话框。 作者释义&#xff1a;显示弹窗&#xff0c;类似于element ui中的Dialog组件。 AlertDialog的定义 const AlertDialog({super.key,this.icon,this.iconPadding,this.iconColor,t…

c++的学习之路:18、容器适配器与反向迭代器

摘要 本文有可能讲的不是特别清楚&#xff0c;我也是初学者有的理解可能有偏差欢迎指出&#xff0c;文章末附上导图。 目录 摘要 一、什么是适配器 二、STL标准库中stack和queue的底层结构 三、deque 1、deque的原理介绍 2、deque的缺陷 四、反向迭代器 五、思维导图…

政安晨:【Keras机器学习实践要点】(二十一)—— MobileViT:基于变换器的移动友好图像分类模型

目录 简介 导入 超参数 MobileViT 实用程序 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; …

kafka(四)——生产者流程分析(c++)

前言 kafka生产者负责将数据发布到kafka集群的主题&#xff1b;kafka生产者消息发送方式有两种&#xff1a; 同步发送异步回调发送 流程 流程说明&#xff1a; Kafka Producer整体可看作是一个异步处理操作&#xff1b;消息发送过程中涉及两个线程&#xff1a;main线程和se…

JetBrains IDE(IDEA/WebStorm)配置GitHub Copilot

关于 GitHub Copilot 和 JetBrains IDE GitHub Copilot 在编写代码时提供 AI 对程序员的自动完成样式的建议。 有关详细信息&#xff0c;请参阅“关于 GitHub Copilot Individual”。 如果使用 JetBrains IDE&#xff0c;可以直接在编辑器中查看并合并来自 GitHub Copilot 的…

DXP学习002-PCB编辑器的环境参数及电路板参数相关设置

目录 一&#xff0c;dxp的pcb编辑器环境 1&#xff0c;创建新的PCB设计文档 2&#xff0c;PCB编辑器界面 1&#xff09;布线工具栏 2&#xff09;公用工具栏 3&#xff09;层标签栏 ​编辑 3&#xff0c;PCB设计面板 1&#xff09;打开pcb设计面板 4&#xff0c;PCB观…