css-counter属性

前言

博客原文查看可点击《CSS counter属性》哦！ 本文引用张鑫旭大大博客文章《CSS counter计数器(content目录序号自动递增)详解》，一直以为鑫大大是个被程序员耽误的小说家，他的文章风格大都以浅明深，诙谐幽默，可点击这里查看原文哦。

好了，It's my show time!
在了解到counter以前，想到计数应该属ul，ol标签元素了吧，但它们的递增规则单一，没法实现自定义的递增。而counter属性完美的解决了这个问题，让咱们一块儿来看看吧。
首先，使用一个属性前，咱们必定得了解一下它的兼容性，曾经被IE兼容性虐哭的我，不得不当心做为一个好用属性的兼容问题。

兼容性

I E	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
8.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+

  看到这里是否是内心放松了不少，它的兼容性仍是能够的接受的，范围不算局限。

counter的使用题要

CSS计数器只能跟content属性在一块儿的时候才有做用，而content属性貌似专门用在before/after伪元素上的。因而，就有了，“计数器↔伪元素↔content属性”的铁三角关系

counter成员

counter的成员主要有三个：

• counter-reset（计数器声明及初始值设置）
• counter-increment（递增规则）
• counter()/counters(计算结果生成)

counter-reset

counter-reset主要有三个属性。

• none：默认。不能对选择器的计数器进行重置。
• name num：name即标记计数器名称，num即记录计数器初始值。num非必写，默认为0。
• inherit：规定应该从父元素继承 counter-reset 属性的值。

counter-increment

counter-increment主要有三个属性。

• none：没有计数器将递增。
• name num：name即选择递增的计数器，num即增量。num非必写，默认为1，能够是正数、零或者负数。
• inherit：指定counter-increment属性的值，应该从父元素继承。

counter()/counters()

这是个方法，不是属性。相似CSS3中才calc()计算。

• name：选择递增的计数器。
• style：递增的数字样式：阿拉伯数字，罗马数字等，具体以下：

list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

• string：counters的属性，子序数链接符

注：多个计数器还可同时命名，接下来咱们上代码看几个例子。

CSS：
1. counter-reset属性
.xxx { 
  counter-reset: count; /* 计数器名称是'count', 而且默认起始值为0 */
} 

.xxx { 
  counter-reset: count 4; /* 计数器名称是'count', 而且默认起始值为4 */
} 

.xxx { 
  counter-reset: count1 2 count2 3; /* 定义两个计数器'count1'和'count2',默认起始值分别为2和3 */
} 

2. counter-increment属性
.counter { 
  counter-increment: count 2; /*'count'以2阶段递增 */
}

.counter { 
  counter-increment: count -1;  /*'count'以1阶段递减 */
}

3. counter方法
counters(name, style);

.counter:before { 
  content: counter(count1) '\A' counter(count2);  /*'\A'使用inline水平元素换行*/
  white-space: pre; 
}
复制代码

  接下来看一个完整的例子。
效果如图：

<div class="box">
	<div class="list">一级标题
    <div class="box">
      <div class="list">二级标题</div>
      <div class="list">二级标题</div>
      <div class="list">二级标题</div>
    </div>
    <div class="box">
      <div class="list">二级标题
        <div class="box">
          <div class="list">三级标题</div>
          <div class="list">三级标题</div>
          <div class="list">三级标题</div>
        </div>
      </div>
    </div>
    <div class="box"></div>	
    </div>
  <div>
  <div class="list">一级标题<div>
</div>

<style> .box { counter-reset: counter; } .toper, .inner { background-color: #eee; margin-left: 20px; } .list:before, .toper:before, .inner:before { counter-increment: counter; } .list { padding-left: 20px; } .inner:before, .list:before, .toper:before { content: counters(counter,'.')'、'; } </style>
复制代码

OK~至此，关于counter的介绍就差很少结束了，能够在实践过程当中发现和挖掘更有意思的操做，若是你有什么有趣的神操做，能够给我留言分享哦！啦啦啦~