CSS 基础（026_计数器）

最新推荐文章于 2024-08-17 22:24:13 发布

柯南道尔2606

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量380

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css_counters.asp

翻译：

CSS 计数器（CSS Counters）

CSS 计数器是由 CSS 维护的“变量”，它的值能够根据 CSS 规则（追踪它们的执行次数）不断累加。计数器让我们可以基于内容所在文档的位置来调整它的外观。

Automatic Numbering With Counters

CSS 计数器类似于“变量”。变量值能够根据 CSS 规则（追踪它们的执行次数）不断累加。

为了与 CSS 计数器协同工作，我们将使用以下属性：

counter-reset - 创建或重置计数器。
counter-increment - 计数器值累加。
content - 插入已生成的内容。
counter() 或 counters() 函数 - 对元素添加计数器值。

要使用 CSS 计数器，首先必须使用 counter-reset 来创建它。

下列示例为页面创建计数器（在 body 选择器内），然后，对每个 <h2> 元素累加计数器值并且在每个 <h2> 元素的开头添加 "Section <value of the counter>:" ：

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

Automatic Numbering With Counters

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
    <h1>Using CSS Counters:</h1>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

Nesting Counters

下列示例为页面（section）创建计数器，再为每个 <h1> 元素（subsection）创建计数器。"section" 计数器使用 "Section <value of the section counter>." 为每个 <h1> 元素计数，subsection 计数器使用 "<value of the section counter>.<value of the subsection counter>" 为每个 <h2> 元素计数：

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

Nesting Counters

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
    <h1>HTML tutorials:</h1>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>

    <h1>Scripting tutorials:</h1>
    <h2>JavaScript</h2>
    <h2>VBScript</h2>

    <h1>XML tutorials:</h1>
    <h2>XML</h2>
    <h2>XSL</h2>

    <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

计数器对制作概要列表（outlined lists）也是非常有用的，因为计时器实例在子元素内会被自动创建。在此，我们使用 counters() 函数在内嵌计数器的不同层次之间插入字符串：

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

Nesting Counters

<!DOCTYPE html>
<html>
<head>
<style>
ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
}
</style>
</head>
<body>
    <ol>
        <li>item</li>
        <li>item
            <ol>
                <li>item</li>
                <li>item</li>
                <li>item
                    <ol>
                        <li>item</li>
                        <li>item</li>
                        <li>item</li>
                    </ol>
                </li>
                <li>item</li>
            </ol>
        </li>
        <li>item</li>
        <li>item</li>
    </ol>

    <ol>
        <li>item</li>
        <li>item</li>
    </ol>

    <p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
</body>
</html>

CSS 计数器属性（CSS Counter Properties）

Property	Description
content	与 ::before 和 ::after 伪元素结合使用，插入已生成的内容
counter-increment	累加一个或多个计数器值
counter-reset	创建或重置一个或多个计数器

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础（026_计数器）

原始网址：http://www.w3schools.com/css/css_counters.asp翻译：CSS 计数器（CSS Counters）CSS 计数器是由 CSS 维护的“变量”，它的值能够根据 CSS 规则（追踪它们的执行次数）不断累加。计数器让我们可以基于内容所在文档的位置来调整它的外观。Automatic Numbering With Counters
复制链接

扫一扫

专栏目录