您的搜索结果

    使用CSS计数器

    本质上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) Recommendation  

    其它

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

     

    文档标签和贡献者

    标签:
    对本页有贡献的人: Nightingale
    最后编辑者: Nightingale,