面试时回答的基础教程CSS计数器

IT行业近十年来发展迅猛，衍生出许多新的职业，如UI设计师、开发工程师、软件测试工程师等，在众多新兴职业中，Web前端工程师就是其中之一。在IT行业，Web前端真正得到重视大概也要六七年。伴随着因特网的迅速发展，各种因特网项目不断涌现，对用户体验的要求也越来越高，前端开发逐渐成为互联网研发的重要角色。

CSS计数器

CSS计数器通过一个变量来设置，根据规则递增变量。

使用计数器自动编号

CSS计数器根据规则来递增变量。

CSS计数器使用到以下几个属性：

counter-reset-创建或者重置计数器

counter-increment-递增变量

content-插入生成的内容

counter()或counters()函数-将计数器的值添加到元素

要使用CSS计数器，得先用counter-reset创建：

以下实例在页面创建一个计数器(在body选择器中)，每个<h2>元素的计数值都会递增，并在每个<h2>元素前添加"Section<计数值>:"

body {  counter-reset: section;
}
h2::before {  counter-increment: section;  content: "Section " counter(section) ": ";
}

嵌套计数器

以下实例在页面创建一个计数器，在每一个<h1>元素前添加计数值"Section<主标题计数值>.",嵌套的计数值则放在<h2>元素的前面，内容为"<主标题计数值>.<副标题计数值>":

body {  counter-reset: section;
}
h1 {  counter-reset: subsection;
}
h1::before {  counter-increment: section;  content: "Section " counter(section) ". ";
}
h2::before {  counter-increment: subsection;  content: counter(section) "." counter(subsection) " ";
}

计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了counters()函数在不同的嵌套层级中插入字符串:

ol {  counter-reset: section;  list-style-type: none;
}
li::before {  counter-increment: section;  content: counters(section,".") " ";
}

前端学习永远不会是单枪匹马，需要前人的引领，也需要平台的不断交流与思想碰撞。这能够快速入门，减少走弯路，还能让自己找到问题的根源。