css互动--计数器 + 自定义变量

<!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>
css互动--计数器 + 自定义变量

推荐阅读更多精彩内容
