在嵌套的网页中使用css计数器创建网站编号

作者：佚名   时间：2014-03-24   分享到：

在嵌套的文档中使用css计数器

如果没有在文档中显示计数器的值，创建它们就没有什么用处。这种显示不是是自动实现的。为了显示计数器，要在当前属性中使用特殊的counter()和counters()值。

counter()值要求圆括号内是计数器的名称，并带有可选的格式声明。然后浏览器在生成的内容中以希望的格式显示指定的计数器。格式可以是任何list-style-type属性接受的列表格式，如节所描述的一样。

例如，为了实际显示编号章节的编号，我们扩展了用于<h1>和<h2>元素的样式规则：

h1:before{counter-increment: chapter; counter-reset: section;
content: "chapter" counter(chapter)":"}
h2:before{counter-increment: section;
content: "section" counter(section)":"}

然后，当支持css2的浏览器在文档中遇到下列代码时：

<h1>在嵌套的文档中使用css计数器</h1>

它会将其显示为：

chapter 1 在嵌套的文档中使用css计数器

如果要例用罗马数字为我们的章编号，就会将属性改变为：

h1:before{counter-increment: chapter; counter-reset: section;
content: "chapter" counter(chapter,upper-roman) ":"}
h2:before{counter-increment:section;
content: "section" counter(section, lower-roman)":"}

counter()值是当前嵌套层中计数器的值。如果要访问所有嵌套层上周名计数器的所有值，就要使用复数形式的characters()值。在圆括号和分隔符字符串中要包括计数器的名称。浏览器将显示中计数器的分隔符字符串放在每个值列表之间。还可以提供一种格式类型从摩尔的十进制编号切换过来。

在创建嵌套的编号列表时，counters()值是最有用的。请考虑下列属性:

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

如果在文档中嵌套多个<ol>元素，每个<li>都会包括所有嵌套的值，并用句点分开。这就会生成“1，1.1，1.1.1”等此类嵌套增加的熟悉的编号模式。