CSS counter

CSS counter

CSS counter类似于变量。这些由CSS维护,并且这些值可以由CSS规则递增以跟踪使用它们的次数。
CSS counter简化了基于CSS的简单递增操作,并显示了生成内容的数字。

CSS counter属性

以下是列表与CSScounter一起使用的属性:

counter-reset::用于创建或重置计数器。
counter-increment:用于增加计数器值。
content::用于插入生成的内容。
counter()或counters()函数:用于将计数器的值添加到元素。

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

CSS计数器示例

我们以一个示例为页面创建一个计数器,并为每个下一个元素增加计数器值。
请参见以下示例:
 <!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
}
h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>CSS Counter示例:</h1>
<h2>Java教程</h2>
<h2>HTML教程</h2>
<h2>CSS教程</h2>
<h2>Oracle教程</h2>
<p><strong>注意:</strong> IE8支持只有指定了!DOCTYPE时,这些属性才有效。</p>
</body>
</html>
注意:在上面的示例中,您可以看到在主体选择器中为页面创建了一个计数器,该计数器为每个<h2>元素增加了计数器值,并添加了" Section"每个<h2>元素的开头的counter的值。

CSS嵌套counter

您还可以在counter内创建counter,这称为counter嵌套。让我们以一个示例来演示counter计数器。
请参见以下示例:
 <!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>Java教程:</h1>
<h2>Java核心教程</h2>
<h2>Servlet教程</h2>
<h2>JSP教程</h2>
<h2>Spring教程</h2>
<h2>Hibernate教程</h2>
<h1>Web技术教程:</h1>
<h2>HTML教程</h2>
<h2>CSS教程</h2>
<h2>jQuery教程</h2>
<h2>Bootstrap教程</h2>
<h1>Database教程:</h1>
<h2>SQL教程</h2>
<h2>MySQL教程</h2>
<h2>PL/SQL教程</h2>
<h2>Oracle教程</h2>
<p><strong>注意:</strong> IE8支持只有指定了!DOCTYPE时,这些属性才有效。</p>
</body>
</html>
注意:在上面的示例中,您可以看到为该节创建了一个计数器,并在该节中创建了另一个名为subsection的嵌套计数器。

不同级别的嵌套counter

您可以使用嵌套计数器创建轮廓列表。它使您可以在不同级别的嵌套计数器之间插入字符串。
请参见以下示例:
 <!DOCTYPE html>
<html>
<head>
<style>
ol {
    counter-reset: section;
    list-style-type: none;
}
li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}
</style>
</head>
<body>
<h2>不同级别的嵌套counter</h2>
<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>
<p><b>Note:</b> IE8支持只有指定了!DOCTYPE时,这些属性才有效。</p>
</body>
</html>