利用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>