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

开课吧开课吧锤锤2021-04-15 11:33

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

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,".") " ";
}

    前端学习永远不会是单枪匹马,需要前人的引领,也需要平台的不断交流与思想碰撞。这能够快速入门,减少走弯路,还能让自己找到问题的根源。更多的Web教程尽在开课吧广场Web教程频道。

有用
分享