css counters css计数器

css计数器用来定义css维护的变量,可以计算元素的个数以添加序号

counter-reset

用来重置计数器值到一个给定的变量,一般设置在父元素上。

counter-increment

用来累加计数器值,一般设置在子元素上。

counter()

counter()函数计算元素的计数器值。

counters()

在不同级别嵌套的计数器值之间插入字符串。

下面是例子:

html:

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

css:

body {
  counter-reset: section;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: section;      /* 增加计数器值 */
  content: "Section " counter(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:

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

效果:

效果看这里

 

posted @ 2018-04-01 12:48  hahazexia  阅读(193)  评论(0)    收藏  举报