Css 简明教程

CSS - Counters

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

In CSS, counters act as variables that are used for numbering purposes. They can be increased or decreased by css rules. Css counters enable us to modify the presentation of content depending on its position. For instance you can use the counters to automatically assign numbers to paragraphs, headings and lists.

CSS Counters - Nesting Counters

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

We can use the counters() function along with the counter-reset and counter-increment properties to create outlined lists with nested counters. This technique allows you to automatically generate counters for different levels of nesting.

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

This following example creates a nested structure using the <ol> element to demonstrate the nesting of counters.

<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() 函数对其进行命名。

A reversed counter is a special kind of counter that counts backwards instead of forward. To create a reversed counter, name it with the reversed() function when you set it up with counter-reset.

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

The reversed counters start with a default initial value equal to the number of elements, not zero. This means that it can simply count down from the number of elements to one.

Syntax

counter-reset: reversed(counter name);

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

The following example demonstrates reversed counter (Execute this example in Firefox browser).

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