使用CSS计数器

2 位贡献者:

本质上CSS计数器是由CSS维护的变量,这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。

计数器的值通过使用counter-resetcounter-increment 操作,在 content 上应用 counter()counters()函数来显示在页面上。

使用计数器

使用CSS计数器之前,必须被重置一个值,默认是0。使用 counter() 函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <计算器值>:"。

body {
  counter-reset: section;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: section;      /* 增加计数器值 */
  content: "Section " counter(section) ": "; /* 显示计数器 */
}

例如:

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

计数器嵌套

CSS计数器对创建有序列表特别有用,因为在孩子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数,在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子:

ol {
  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* 只增加计数器的当前实例 */
  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
}

结合下面的HTML:

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

结果为:

规范

规范 状态 注释
CSS Level 2 (Revision 1)
counter-reset
Recommendation  

其它

另一个可用的示例在 http://www.mezzoblue.com/archives/20.../counter_intu/。这篇博客 发布于2006年11月1日,但是看上去写得还是准确的。

 

文档标签和贡献者

标签: 
向此页面作出贡献: Jiasm, Nightingale
最后编辑者: Jiasm,