关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS反攻精讲

CSS反攻精讲

CSS计数器类似于变量，可以实现简单的计数功能并将结果显示在页面上，在早期的网站中广泛使用。要实现计数器，您需要以下属性：

counter-reset：创建或重置计数器。
反自增：自增变量；
内容：插入生成的内容。
counter() 或 counters()：将计数器的值添加到元素。

我们来看看CSS中如何使用计数器。

初始化计数器

这个过程称为计数器初始化。计数器重置属性的语法为：

计数器重置：无 | [<标识符> <整数>]

参数说明如下：

none：防止计数器重置。
<identifier>：定义计数器的名称。
<integer>：定义计数器的起始值。默认值为 0 并且可以为负数。

计数器增量

计数器初始化后，可以使用 counter-increment 属性来指定计数器何时自动递增。语法是：

反自增：无 | [<标识符> <整数>]

参数说明如下：

none：防止计数器递增。
<identifier>：定义要递增的计数器的名称。
<integer>：定义计数器每次增加的值。默认值为 1 并且可以为负数。

显示柜台

最后，如何显示计数器。要显示计数器，可以使用 counter() 或 counters() 函数。这两个函数的语法是：

柜台（名称）
计数器（名称、字符串、列表样式类型）

参数说明如下：

名称：柜台名称；
string：计数器嵌套使用时用于拼接的字符串。
list-style-type：计数器显示的样式。可以是 CSS 允许的任何list-style-type 属性值。

这是一个展示如何使用计数器的简单示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            counter-reset: chapter; 
        }
        h5, h6 {
            margin: 5px 0 5px;
        }
        h5 {
            counter-reset: section;
            counter-increment: chapter;
        }
        h6 {
            counter-increment: section;
        }
        h5:before {
            content: "第" counter(chapter) "章 ";
        }
        h6:before {
            content: counter(chapter) "." counter(section) " ";
        }
    </style>
</head>
<body>
    <h5>プログラミング言語</h5>
    <h6>HTML and CSS</h6>
    <h6>JavaScript</h6>
    <h6>PHP</h6>
    <h6>Java</h6>

    <h5>データベース管理システム</h5>
    <h6>MySQL</h6>
    <h6>MariaDB</h6>
    <h6>PostgreSQL</h6>
    <h6>Oracle</h6>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_632”对齐=“aligncenter”宽度=“1024”] 插图：柜台

图：计数器[/标题]

注意：在使用 CSS 计数器之前，必须使用 counter-reset 创建它们。

此外，计数器可以嵌套，如以下示例所示。您可以使用 counters() 函数在嵌套于不同级别的计数器之间插入字符串。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ol {
            /* 各ol要素に新しいカウンターインスタンスを作成 */
            counter-reset: ol-list;
            list-style-type: none;
        }
        li:before {
            /* 現在のカウンターインスタンスのみを増やす */
            counter-increment: ol-list;
            /* 全てのカウンターインスタンスに"."で区切られた値を追加 */
            content: counters(ol-list, ".") "、";
        }
    </style>
</head>
<body>
    <ol>
        <li>アイテム</li>
        <li>アイテム
            <ol>
                <li>アイテム</li>
                <li>アイテム</li>
                <li>アイテム
                    <ol>
                        <li>アイテム</li>
                        <li>アイテム</li>
                    </ol>
                </li>
                <li>アイテム
                    <ol>
                        <li>アイテム</li>
                        <li>アイテム</li>
                        <li>アイテム</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>アイテム</li>
        <li>アイテム</li>
    </ol>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_633”对齐=“aligncenter”宽度=“1024”]

图：嵌套计数器[/caption]

从上面的例子中，很容易看出如何使用CSS计数器来实现简单的计数功能，而无需使用其他编程语言（JavaScript、PHP等）。如果您需要为某些内容添加序列号，这非常合适。。