【前端技巧】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>