content特性早就在css2.1的情况下就被引进了，可使用:before及其:after伪原素转化成內容。content特性如今早已获得大部分分访问器的适用，有关content特性的适用状况能够在caniuse.com网站在开展搜索，一下为现阶段它的适用状况：
content特性最经常见的是相互配合:before或:after来转化成內容，默认设置宣称的原素为内行人原素：
之上段编码的功效为在类名叫test的div內容的前后左右再加content中的內容，在content以后还能够设定其他款式，在这里里，content非常于伪原素的激话标示，是不可或缺的。
div.test:before{
content: "我还在div以前"；
}
div.test:after{
content:"我还在div以后"；
}
content特性的值除开应用文字值以外，还能够根据attr()方式来应用其他标识的特性值：
a.test:after{
content: attr(href);
}
<a class="test" href="http://www.taobao.com/">热烈欢迎赶到 </a>
css电子计数器出現的较为早，但近期才刚开始掌握。因为css电子计数器只有跟content特性一起应用时才有功效，而content特性常常与:before和:after伪原素配搭应用，因此就会有利电子计数器，伪原素，content中间不能切分的关联。css电子计数器关键包括2个特性和一个方式，各自为：
1. counter-reset
该特性界定电子计数器的名字，能够同时界定好几个电子计数器，界定数据时期表原始值，默认设置默认设置为0：
div.count{
counter-reset: count1 count2;
}
如上编码界定2个电子计数器count1和count2，原始默认设置为0。
2. counter-increment
该特性接受2个主要参数，第一个主要参数意味着电子计数器的名字，第二个意味着每一次增长的值，默认设置时默认设置为1
div.count:before{
counter-increment: count1 2;
}
此番编码界定电子计数器count1一次自升值为，这时电子计数器默认设置原始数值0+2=2；若这儿将数据2默认设置，则默认设置自升值为1，这时电子计数器原始数值0+1=1。
3. counter()/counters()
该方式为电子计数器启用方式，接受2个主要参数，第一个主要参数为电子计数器名字，第二个为标值种类，出来对此案例开展一个小训练：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>counter&content</title>
<style>
div.conter{
margin-left: 50px;
couter-reset: count; /* 界定电子计数器count */
}
.conter p{
height: 40px;
border: 1px solid #ffe000;
}
.conter p:before{
content: counter(count,decimal) "." /*启用电子计数器 并在数据后加上.*/
counter-increment: count;
}
</style>
</head>
<body>
<div class="conter">
<p>文章段落1</p>
<p>文章段落2</p>
<p>文章段落3</p>
<p>文章段落4</p>
<p>文章段落5</p>
</div>
</body>
</html>
最后結果以下：
到此这篇有关css counter电子计数器与content小结的文章内容就详细介绍到这了,大量有关css counter电子计数器內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！