css 计数器
伪元素与content简介
什么是伪元素？
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
伪元素的语法：
selector::pseudo-element {
property: value;
}
CSS - ::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。
下面的例子在每个div元素的内容之后插入一幅图像：
div::after {
content: url(smile.gif);
}
CSS - ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
下面的例子在每个div元素的内容之前插入一幅图像：
div::before {
content: url(smile.gif);
}
content的作用
这里的content属性是配合::before或::after来生成内容，默认生成的元素为行内元素。
content属性的值除了使用文本值之外，还可以通过attr()方法来使用其它标签的属性值：
<a class="test" href="http://www.xxx.com/">欢迎来到xxx </a>
a.test:after{
content: attr(href);
}
css计数器
css计数器只能跟content属性一起使用时才有作用
相关属性
1.counter-reset
该属性定义计数器的名称，可以同时定义多个计数器，定义数字时代表初始值，缺省默认为0：
div.count{
counter-reset: count1 count2;
}
如上代码定义两个计数器count1和count2，初始默认为0。
2.counter-increment
该属性接收两个参数，第一个参数代表计数器的名称，第二个代表每次递增的值，缺省时默认为1
div.count::before{
counter-increment: count1 2;
}
此行代码定义计数器count1单次自增值为，此时计数器默认初始值为0+2=2；若这里将数字2缺省，则默认自增值为1，此时计数器初始值为0+1=1。
3. counter()/counters()
该方法为计数器调用方法，接收两个参数，第一个参数为计数器名称，第二个为数值类型
计数器示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
li {
list-style: none;
}
.father {
padding-left: 20px;
counter-reset: count;
line-height: 1.6;
color: #666;
}
.son::before {
content: counters(count, '-') '. ';
counter-increment: count;
font-family: arial black;
}
</style>
</head>
<body>
<ul class="father">
<li class="son">HTML
<ul class="father">
<li class="son">常用html标签</li>
<li class="son">标签按自身属性的分类</li>
<li class="son">HTML5新增标签</li>
</ul>
</li>
<li class="son">CSS
<ul class="father">
<li class="son">CSS的引入方式
<ul class="father">
<li class="son">行内式</li>
<li class="son">内嵌式</li>
<li class="son">外链式</li>
<li class="son">导入式</li>
</ul>
</li>
<li class="son">CSS选择器</li>
<li class="son">CSS的书写规范</li>
</ul>
</li>
<li class="son">JS</li>
<li class="son">web前端</li>
</ul>
</body>
</html>
效果：
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
