【前端技巧】css篇

利用counter实现计数器

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

counter-rese: <idntifier><integer>

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

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

counter-increment: <idntifier><integer>

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

counter():展示计数器

counter( <custom-ident>, <counter-style>? )

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

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

counters( <custom-ident>, <string>, <counter-style>? )

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

举个例子：

    <ul>
      <li>html</li>
      <li>css</li>
      <li>js</li>
    </ul>
<style>
  ul {
    counter-reset: digit 1;
    li {
      text-decoration: none;
    }
  }
  ul li::before {
    counter-increment: digit 2;
    content: counter(digit) ")";
  }
</style>

效果如下：

链接的状态顺序

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

<style>
  a:link {
    color: yellow;
  }
  a:visited {
    color: green;
  }
  a:hover {
    color: red;
  }
  a:active {
    color: orange;
  }
</style>