Css 简明教程

CSS - Counters

在 CSS 中， counters 作为变量，用于编号。它们可以增加或减少 css 规则。Css counters 能让我们根据其位置修改内容的呈现。例如，您可以使用 counters 自动为段落、标题和列表赋予编号。

CSS Counters - Nesting Counters

我们可以将 counters() 函数与 counter-reset 和 counter-increment 属性结合使用，以创建包含嵌套计数器的轮廓化列表。此技术允许您自动为不同嵌套级别生成计数器。

以下示例使用 <ol> 元素创建一个嵌套结构，以演示计数器的嵌套。

<html>
<head>
  <title>Nesting of Counter</title>
  <style>
      ol {
         counter-reset: section;
         list-style-type: none;
      }
      li::before {
         counter-increment: section;
         content: counters(section, ".") " ";
      }
</style>
</head>
<body>
   <ol>
      <li>Section 1
      <ol>
        <li>Subsection 1.1</li>
        <li>Subsection 1.2</li>
        <li>Subsection 1.3</li>
      </ol>
    </li>
    <li>Section 2
      <ol>
        <li>Subsection 2.1</li>
        <li>Subsection 2.2</li>
        <li>Subsection 2.3</li>
      </ol>
    </li>
    <li>Section 3
      <ol>
        <li>Subsection 3.1</li>
        <li>Subsection 3.2</li>
        <li>Subsection 3.3</li>
      </ol>
    </li>
  </ol>
</body>
</html>

CSS Counters - Reversed counter

倒计数器是一种特殊的计数器，它倒着计数，而不是正向计数。要创建一个倒计数器，请在使用 counter-reset 设置它时，用 reversed() 函数对其进行命名。

倒计数器以等于元素数的默认初始值开头，而不是零。这意味着它可以简单地从元素数倒数到一。

Syntax

counter-reset: reversed(counter name);

以下示例演示了倒计数器（在 Firefox 浏览器中执行此示例）。

<html>
<head>
<style>
   body {
   counter-reset: reversed(
   section);
   }
   p::before {
   counter-increment: section -1;
   content: "Section " counter(section) ": ";
   }
</style>
</head>
<body>
   <p>This is fourth paragraph</p>
   <p>This is Third paragraph</p>
   <p>This is second paragraph</p>
   <p>This is first paragraph</p>
</body>
</html>