在介绍 CSS counter前，我们先明确两个概念： 替换元素 和 非替换元素。

在HTML中，什么是替换元素，什么又是非替换元素？举例说明，img是替换元素，因为它的内容是根据src属性关联的。 span是非替换元素，我们无法改变span标签本身的内容（实际上它显示的文字是由它的子节点定义的，纯文本在html也是一种节点类型，文本节点）。

那么替换元素与非替换元素的区别在哪儿呢？ 可以说，只有一个属性的差距，这个属性就是content。

预测一下，<p>元素最终的呈现内容。

<style>
	.content{
		content: url('images/01.jpg')
	}
</style>
<p class="content">this is option A .</p>

这个属于content内容生成的范围，技术实现细节我们暂且不展开讲。

在我们实现的CSS的计数器中，用到了这种技术。

       <style>
		.counter-box {
			counter-reset: title;
		}

		.counter-box h3:before {
			counter-increment: title;
			content: counter(title);
		}
	</style>
	<div class="counter-box">
		<h3>&nbsp; 1 <button class="del-btn">删除 </button></h3>
		<h3>&nbsp; 2 <button class="del-btn">删除 </button></h3>
		<h3>&nbsp; 3 <button class="del-btn">删除 </button></h3>
		<h3>&nbsp; 4 <button class="del-btn">删除 </button></h3>
		<h3>&nbsp; 5 <button class="del-btn">删除 </button></h3>
		<h3>&nbsp; 6 <button class="del-btn">删除 </button></h3>
	</div>
	<script>
		const box = document.querySelector('.counter-box');
		box.addEventListener('click', (e) => {
			if (e.target.className === 'del-btn') {
				e.target.parentNode.remove();
			}
		});
	</script>

在页面中，无论怎样删除<h3>标签，他前面的序号都会有序排列。

这么看来，它根有序列表<ol>有什么区别呢？ 在我看来， <ol>的序号是一种html内置的规范，样式也已经固定物那么几种。但是用css的counter属性配合内容生成技术（content属性），可以让计数器的样式更加灵活。

还是上面的例子，我们稍微改一下。

<style>
    .counter-box{
        counter-reset: title;
    }

    .counter-box .counter:before{
        counter-increment: title;
        content: counter(title);
        color: red;
        font-family: "Micro YaHei";
    }
</style>
<div class="counter-box">
    <h3> 第<span class="counter"> </span> 个 </h3>
    <h3> 第<span class="counter"> </span> 个 </h3>
    <h3> 第<span class="counter"> </span> 个 </h3>
</div>