<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计数器 + 自定义变量</title>
<style>
/* 计数器 */
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
/* 自定义变量 */
:root {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
p {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
</style>
</head>
<body>
<!-- 计数器 -->
<ul>
<!-- counter-reset 初始化计数器，值为计数器的名称。默认情况下，计数器从0开始。
此属性还可用于将其值更改为任何特定数字。
counter-increment 用于可计数的元素中。
一次counter-reset 初始化后，计数器的值可以增加或减少。
counter(name, style) 显示区段计数器的值。一般用于content 财产。
此函数可以接收两个参数，第一个参数作为计数器的名称，第二个参数可以是decimal 或者upper-roman （decimal 默认情况下)。
counters(counter, string, style) 显示区段计数器的值。一般用于content 财产。
此函数可以接收三个参数，第一个参数作为计数器的名称，第二个参数可以包括在计数器后面的字符串，第三个参数可以是decimal 或者upper-roman （decimal 默认情况下)。
CSS计数器对于生成大纲列表特别有用，因为计数器的新实例是在子元素中自动创建的。
使用counters() 函数，可以在不同级别的嵌套计数器之间插入分隔文本。 -->
<li>哈哈哈</li>
<li>呵呵呵</li>
<li>咯咯咯</li>
</ul>
<!-- 自定义变量 -->
<p>
变量是在:root 与表示文档的树的根元素匹配的CSS伪类。如果在块中定义变量，则变量的作用域也可以限定为选择器。
使用宣告变数--variable-name: 。
使用在整个文档中重用变量var(--variable-name) 功能。
</p>
</body>
</html>
网友评论