乐趣区

关于前端:强大的css计数器

弱小的 css 计数器

css content 属性有很多实用的用法,这其中最为弱小的莫过于是计数器了,它甚至能够实现连 javascript 都不可能实现的成果,上面咱们一起来钻研一下吧。

css 计数器次要有 3 个关键点须要把握。如下:

  1. 首先须要一个计数器的名字,这个名字由使用者本人定义。
  2. 计数器有一个计数规定,比方是 1,2,3,4… 这样的递增形式,还是 1,2,1,2… 这样的间断递增形式。
  3. 计数器的应用,即定义好了一个计数器名字和计数规定,咱们就须要去应用它。

以上 3 个关键点别离对应的就是 css 计数器的 counter-reset 属性,counter-increment 属性,和 counter()/counters() 办法。上面咱们顺次来介绍这三个玩意儿。

counter-reset 属性

counter-reset 属性叫做计数器重置,对应的就是创立一个计数器名字,如果能够,顺便也能够通知计数器的计数起始值, 也就是从哪个值开始计数,默认值是 0, 留神是 0, 而不是 1。例如以下一个示例:

html 代码如下:

<p> 开始计数,计数器名叫 counter</p>
<p class="counter"></p>

css 代码如下:

.counter {counter-reset: counter;}

.counter::before {content: counter(counter);
}

在浏览器中运行以上示例,你会看到如下图所示:

能够看到计数器的初始值就是 0, 当初咱们批改一下 css 代码,如下所示:

.counter {counter-reset: counter 1;}

在浏览器中运行以上示例,你会看到如下图所示:

这次咱们指定了计数器的初始值 1,所以后果就是 1,计数器的初始值同样也能够指定成小数,正数,如 -2,2.99 之类,只不过 IE 和 FireFox 浏览器都会认为是不非法的数值,当做默认值 0 来解决,谷歌浏览器也会间接显示正数,如下图所示:

低版本谷歌浏览器解决小数的时候是向下取整,比方 2.99 则显示 2, 最新版本则当成默认值 0, 来解决,如下图所示:

ps: 当然不举荐指定初始值为正数或者小数。

你认为到这里就完了吗?还没有,计数器还能够指定多个,每一个计数器之间用空格隔开,比方以下代码:

.counter {counter-reset: counter1 1 counter2 2;}

.counter::before {content: counter(counter1) counter(counter2);
}

在浏览器中运行以上示例,你会看到如下图所示:

除此之外,计数器名还能够指定为 none 和 inherit,也就是勾销计数和继承计数器,这没什么好说的。

counter-increment

顾名思义,该属性就是计数器递增的意思,也就是定义计数器的计数规定,值为计数器的名字,能够是一个或者多个,并且也能够指定一个数字,示意计数器每次变动的数字,如果不指定,默认就依照 1 来变动。比方以下代码:

.counter {
  counter-reset: counter 1;
  counter-increment: counter;
}

失去的后果就是: 1 + 1 = 2。如下图所示:

再比方以下代码:

.counter {
  counter-reset: counter 2;
  counter-increment: counter 3;
}

失去的后果就是:2 + 3 = 5,如下图所示:

由此可见,计数器的规定就是: 计数器名字惟一,每指定一次计数规定,计数器就会加一,每指定二次计数规定,计数器就会加二,……以此类推。

计数规定不仅能够创立在元素上,也能够创立在应用计数器的元素上,比方以下代码:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

.counter::before {content: counter(counter);
  counter-increment: counter;
}

咱们不仅在类名为 counter 元素上创立了一个计数器规定,同样的也在 before 伪元素上创立了一个计数器规定,因而最初的后果就是: 0 + 1 + 1 = 2。如下图所示:

总而言之,无论地位在何处,只有有 counter-increment,对应的计数器的值就会变动,counter() 只是输入而已! 计数器的数值变动遵循 HTML 渲染程序,遇到一个 increment 计数器就变动,什么时候 counter 输入就输入此时的计数值。

除此之外,计数器规定也能够和计数器一样,创立多个计数规定,也是以空格辨别,比方以下示例代码:

.counter {
  counter-reset: counter1 1 counter2 2;
  counter-increment: counter1 2 counter2 3;
}

.counter::before {content: counter(counter1) counter(counter2);
  counter-increment: counter1 4 counter2 5;
}

此时的后果就应该是计数器 1: 1 + 2 + 4 = 7, 计数器 2: 2 + 3 + 5 = 10。如下图所示:

同样的,计数器规定的值也能够是正数,也就是递加成果了,比方以下代码:

.counter {
  counter-reset: counter1 1 counter2 2;
  counter-increment: counter1 -1 counter2 -3;
}

.counter::before {content: counter(counter1) counter(counter2);
  counter-increment: counter1 2 counter2 5;
}

此时的后果就应该是计数器 1: 1 – 1 + 2 = 2, 计数器 2: 2 – 3 + 5 = 4。如下图所示:

同样的计数规定的值也能够是 none 或者 inherit。

counter

counter 办法相似于 calc,次要用于定义计数器的显示输入,到目前为止,咱们后面的示例都是最简略的输入,也就是如下语法:

counter(name); /* name 为计数器名 */

实际上还有如下的语法:

counter(name,style);

style 参数和 list-style-type 的值一样,意思就是不仅能够显示数字,还能够显示罗马数字,中文字符,英文字母等等,值如下:

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 | simp-chinese-informal;

比方以下的示例代码:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

.counter::before {content: counter(counter, lower-roman);
}

后果如下图所示:

再比方以下的示例代码:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

.counter::before {content: counter(counter, simp-chinese-informal);
}

后果如下图所示:

同样的 counter 也能够反对级联,也就是说,一个 content 属性值能够有多个 counter 办法,如:

.counter {
  counter-reset: counter;
  counter-increment: counter;
}

.counter::before {content: counter(counter) '.' counter(counter);
}

后果如下图所示:

counters

counters 办法尽管只是比 counter 多了一个 s 字母,然而含意可不一样,counters 就是用来嵌套计数器的,什么意思了?咱们平时如果显示列表符号,不可能只是单单显示 1,2,3,4… 还有可能显示 1.1,1.2,1.3… 前者是 counter 做的事件,后者就是 counters 干的事件。

counters 的语法为:

counters(name, string);

name 就是计数器名字,而第二个参数 string 就是分隔字符串,比方以 ’.’ 分隔,那 string 的值就是 ’.’,以 ’-‘ 分隔,那 string 的值就是 ’-‘。来看如下一个示例:

html 代码如下:

<div class="reset">
  <div class="counter">
    javascript 框架
    <div class="reset">
      <div class="counter">&nbsp;angular</div>
      <div class="counter">&nbsp;react</div>
      <div class="counter">
        vue
        <div class="reset">
          <div class="counter">
            vue 语法糖
            <div class="reset">
              <div class="counter">&nbsp;@</div>
              <div class="counter">&nbsp;v-</div>
              <div class="counter">&nbsp;:</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css 代码如下:

.reset {
  counter-reset: counter;
  padding-left: 20px;
}

.counter::before {content: counters(counter, '-') '.';
  counter-increment: counter;
}

后果如下图所示:

这种计数成果在模仿书籍的目录成果时十分实用,比方写文档,会有嵌套题目的状况,还有一个比拟重要的点须要阐明一下,就是显示 content 计数值的那个 DOM 元素在文档流中的地位肯定要在 counter-increment 元素的前面,否则是没有计数成果的。

总而言之,content 计数器是十分弱小的,以上都只是很根底的用法,真正把握还须要大量的实际以及灵感还有创意。

退出移动版