css实现各级标题自动编号

mustuo

已于 2024-04-10 11:19:03 修改

阅读量803

点赞数 26

分类专栏：前端开发文章标签： html html5 css 前端 markdown wordpress

于 2024-04-08 15:45:41 首次发布

本文链接：https://blog.csdn.net/mustuo/article/details/137511775

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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 步骤二：设置编号

分为以下三个步骤：

定义并初始化序号变量
设置序号增量
调用序号变量

2.2.1 定义并初始化序号

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

1、一级标题

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

2、二级即下层标题

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

#write {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

在代码中，counter-reset属性做了两件事：首先，定义了序号变量h1、h2（变量名随您喜好，也可以叫别的）；其次，给序号变量设置了一个初始值，默认为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的基础上添加了::before和counter属性。

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