原始网址: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) ": ";
}
<!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) " ";
}
<!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,".") " ";
}
<!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 | 创建或重置一个或多个计数器 |