【前端技巧】css篇

利用counter实现计数器

counter-reset：为计数器设置名称，语法如下：

counter-rese: 

第一个参数为变量名称，第二个参数为初始值，默认为0

counter-increment：设置计数器增量，语法如下：

counter-increment: 

第一个参数为变量名称，第二个参数为增量，默认为1

counter():展示计数器

counter( , ? )

第一个参数为变量名称，第二个参数为计数器样式，默认为decimal

counters():展示计数器,用于计数器嵌套的场景

counters( , , ? )

第一个参数为变量名称，第二个参数为分隔符， 第三个参数为计数器样式，默认为decimal

举个例子：

• html
• css
• js

ul { counter-reset: digit 1; li { text-decoration: none; } } ul li::before { counter-increment: digit 2; content: counter(digit) ")"; }

效果如下：

链接的状态顺序

链接4种状态:link,:visited :active :hover按LVHA的顺序声明

  a:link {
    color: yellow;
  }
  a:visited {
    color: green;
  }
  a:hover {
    color: red;
  }
  a:active {
    color: orange;
  }