面试时回答的基础教程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,".") " ";
}

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