CSS-counter 计数器详细教程+使用场景示例

counter

  • 一. counter计数器
    • 二. 属性和方法
      • 1. 计数器命名/重置
      • 2. 计数器-值递增规则
      • 3. 计数器显示 counter() / counters() 函数
    • 三 代码示例
      • 1. 重新开始计数
      • 2. counters嵌套使用
      • 3. 借助CSS计数器呈现CSS var变量值

一. counter计数器

CSS-counter 计数器详细教程+使用场景示例_第1张图片

计数器是一种特殊的数字跟踪器,通常用于为CSS列表项自动编号,早期无序列表ul和有序列表ol元素定义时,会自动添加counter()计数器,列表也会自动递增序号,属性都会取默认值

CSS计数器只能跟content属性在一起的时候才有作用,而content属性专门用在before/after伪元素上。
于是,就有了,“计数器↔伪元素↔content属性”的铁三角关系。

二. 属性和方法

1. 计数器命名/重置

counter-reset (可以同时声明多个计数器)

counter-reset: name (initialValue||0);

2. 计数器-值递增规则

counter-increment 递增变量(计数的变化值)

counter-increment: name (changeValue||1)


CSS的计数器的计数是有一套规则的,称为“ 普照规则”:普照源(counter-reset)唯一,每普照(counter-increment)1次,普照源增加1次计数值。

A. 普通普照



"counter">

counter-increment普照了p标签,counter-reset值增加1,于是计数从设置的初始值0变成了1,reset就是这里的计数器,伪元素content值counter(reset)就是1

B. 普照自身 (counter-increment直接设置在伪元素上),结果同上



"counter">

如果父元素和子元素都被counter-increment普照1遍,结果应该是计数器普照两次,结果为2

父元素没有普照,重置默认值0,父元素有2个孩子。孩子自身都接受普照。两个孩子的计数值是?

.counter { 
  counter-reset: reset 0; 
  font-size: 24px; 
}
.counter:before,
.counter:after { 
  content: counter(reset); 
  counter-increment: reset; 
}
<p class="counter"> vs p>

在这里插入图片描述

计数器的数值变化遵循HTML渲染顺序,遇到一个increment计数器就变化,什么时候counter输出就输出此时的计数值。

3. 计数器显示 counter() / counters() 函数

content: counter(name, style) // 1,2,3

content: counters(name, string, style); // 显示嵌套计数,如1.1,1.2,1.3……

string :字符串,子序号的连接符https://codepen.io/airen/pen/YzVBVrG
style: 支持关键字 list-style-type,递增和递减不一定都是数字, 可以是英文字母或其他

三 代码示例

1. 重新开始计数

在同一层级中,可以通过重复声明相同名字的计数器来打断(或者说是覆盖)之前的计数,重新开始。

<div class="level1">
    <div class="level1-item">foodiv>
    <div class="level1-item">bardiv>
    <div class="level1-item break">bazdiv>
    <div class="level1-item">quxdiv>
div>
<style>
	.level1 {
	    counter-reset: level1;
	}
	.break {
	    counter-reset: level1;
	}
	.level1-item:before {
	    content: counter(level1, upper-roman) '.';
	    counter-increment: level1 1;
	}
style>

在这里插入图片描述

2. counters嵌套使用

“普照源是唯一的 => 一个容器里的普照源(reset)是唯一的”
想实现嵌套,必须让每一个列表容器拥有一个“普照源”,通过子辈对父辈的counter-reset重置、配合counters()方法才能实现计数嵌套效果。

html:

<div class="reset">
    <div class="counter">text1
        <div class="reset">
            <div class="counter">text1-1div>
            <div class="counter">text1-2
                <div class="reset">
                    <div class="counter">text1-2-1div>
                    <div class="counter">text1-2-2div>
                    <div class="counter">text1-2-3div>
                div>
            div>
            <div class="counter">text1-3div>
        div>
    div>
    <div class="counter">text2div>
    <div class="counter">text3
        <div class="reset">
            <div class="counter">text3-1div>
        div>
    div>
div>

css:


CSS-counter 计数器详细教程+使用场景示例_第2张图片

如果不保证一个容器里的普照源唯一,打乱html顺序:

<div class="reset">
    <div class="counter">text1div>
    <div class="reset">
      <div class="counter">text1-1div>
      <div class="counter">text1-2
            <div class="reset">
              <div class="counter">text1-2-1div>
              <div class="counter">text1-2-2div>
              <div class="counter">text1-2-3div>
            div>
      div>
      <div class="counter">text1-3div>
    div>
    <div class="counter">text2div>
    <div class="counter">text3div>
div>

这里的reset与上面的counter是兄弟关系,而不是父子关系。一个容器的reset的唯一的,一旦子元素出现reset,会改变整个容器的嵌套关系
CSS-counter 计数器详细教程+使用场景示例_第3张图片

3. 借助CSS计数器呈现CSS var变量值

::marker是CSS中新出的一种伪元素,用来匹配列表项中的“标记盒子”(设置为display:list-item的块级元素,除主块级盒子外有一个附加盒子),并可以设置标记盒子里面的内容以及与字符显示相关的UI。
例如大家比较熟悉的

  • 元素,就可以直接使用::marker伪元素改变项目符号颜色、字号字体、甚至内容

  • <style>
        li { 
          display: list-item;
        }
        li::marker { 
          content: "(" counter(list-item) ")"; 
        }
    style>
    
    <ul>
      <li>textli>
      <li>textli>
      <li>textli>
    ul>
    

    有时候可能需要CSS变量作为字符在页面中呈现,CSS变量直接作为content属性值是没有任何效果的

    /* 无效 */
    .bar::before {
        content: var(--percent);
    }
    

    虽然content属性本身不支持变量,但是counter-reset属性后面的计数器初始值是支持的,可以通过counter和content配合使用达到效果:

    .bar::before {
        counter-reset: progress var(--percent);
        content: counter(progress);
    }
    

    CSS-counter 计数器详细教程+使用场景示例_第4张图片

    你可能感兴趣的:(HTML/CSS,css,前端,html,counter)