纯CSS实现markdown自动编号的示例代码

下面是实现 Markdown 自动编号的完整攻略：

1. 编写 HTML 结构

首先，我们需要在 HTML 中编写 Markdown 的各级标题结构。具体来说，我们需要为每个标题添加对应的 HTML 标记和一个唯一的 id 属性，以便后续的 CSS 选择器匹配。

下面是一个示例的 HTML 结构：

<h1 id="section1">第一章</h1>
<h2 id="section1-1">1.1 小节标题</h2>
<h3 id="section1-1-1">1.1.1 子节点标题</h3>
<h2 id="section1-2">1.2 另一个小节标题</h2>
<h3 id="section1-2-1">1.2.1 子节点标题</h3>
<h4 id="section1-2-1-1">1.2.1.1 子子节点标题</h4>

2. 使用 CSS 实现自动编号

接下来，我们需要使用 CSS 来实现自动编号的效果。具体来说，我们需要使用 CSS3 中的 counter-reset 和 counter-increment 属性来实现。

counter-reset 属性用于指定编号的起始值，而 counter-increment 属性则用于每次自增编号的值。

下面是一个示例的 CSS 代码：

body {
  counter-reset: section;
}

h1:before {
  counter-increment: section;
  content: counter(section) '. ';
}

h2:before {
  counter-increment: section1;
  content: counter(section) '.' counter(section1) ' ';
}

h3:before {
  counter-increment: section2;
  content: counter(section) '.' counter(section1) '.' counter(section2) ' ';
}

h4:before {
  counter-increment: section3;
  content: counter(section) '.' counter(section1) '.' counter(section2) '.' counter(section3) ' ';
}

在上述示例中，我们首先通过 counter-reset: section; 将起始编号设置为 0。然后，我们分别为不同的标题级别设置不同的编号规则。对于一级标题 h1，我们通过 counter-increment: section; 每次将当前编号加 1，然后在 content 属性中展示。

对于二级、三级以及更深层次的标题，我们同样使用 counter-increment 将当前编号自增，但是在 content 属性中展示的时候需要将上级编号也展示出来，以达到自动编号的效果。

3. 示例代码说明

在上述示例代码中，我们将 HTML 中的每个标题都添加了唯一的 id 属性，以便 CSS 选择器匹配。同时，我们通过 counter-reset 和 counter-increment 属性来实现自动编号的效果，避免了手动编号带来的错误和麻烦。

以下是两个示例的具体说明：

示例 1

假设我们要展示一份产品规格说明书，其中包含多个章节和小节。我们可以按照如下的方式编写 HTML：

<h1 id="section1">规格说明书</h1>
<h2 id="section1-1">1. 产品概述</h2>
<p>这里是产品概述的内容。</p>
<h2 id="section1-2">2. 技术规格</h2>
<h3 id="section1-2-1">2.1 处理器</h3>
<p>这里是处理器规格的内容。</p>
<h3 id="section1-2-2">2.2 内存</h3>
<p>这里是内存规格的内容。</p>
<h2 id="section1-3">3. 应用场景</h2>
<p>这里是应用场景的描述。</p>

然后，我们使用上述的 CSS 代码即可自动为每个标题编号，展示如下效果：

规格说明书
1. 产品概述
2. 技术规格
2.1 处理器
2.2 内存
3. 应用场景

示例 2

假设我们要写一篇技术文章，其中包含多个章节和小节。我们可以按照如下的方式编写 HTML：

<h1 id="section1">从零开始的React教程</h1>
<h2 id="section1-1">1. React简介</h2>
<p>这里是React介绍的内容。</p>
<h2 id="section1-2">2. 创建React应用</h2>
<h3 id="section1-2-1">2.1 安装Node.js</h3>
<p>这里是安装Node.js的内容。</p>
<h3 id="section1-2-2">2.2 创建React应用</h3>
<p>这里是创建React应用的内容。</p>
<h2 id="section1-3">3. 组件和Props</h2>
<p>这里是组件和Props介绍的内容。</p>