文章: 阅读:

CSS Counter 计数器

CSSCSS

前言

  • CSS 计数器通过一个变量来设置，根据规则递增变量。
属性 描述 CSS 备注 🔗
counter-reset 创建或重置一个或多个计数器 2 🔗
counter-increment 递增一个或多个值 2 🔗
content 使用 ::before 和 ::after 伪元素来插入自动生成的内容 2 🔗

  • counter() 或 counters() 函数 - 将计数器的值添加到元素。

  • 注意: IE8 需要指定 !DOCTYPE 才可以支持该属性。

1、使用计数器自动编号

  • 要使用 CSS 计数器，得先用 counter-reset 创建或重置一个或多个计数器。counter-reset 属性通常是和 counter-increment 属性，content 属性一起使用。
counter-reset 属性值 描述
none 默认。不能对选择器的计数器进行重置
id number id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数
inherit 规定应该从父元素继承 counter-reset 属性的值
  • counter-increment 属性递增一个或多个计数器值。counter-increment 属性通常用于 counter-reset 属性和 content 属性。
counter-increment 属性值 描述
none 没有计数器将递增
id number id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
inherit 指定counter-increment属性的值，应该从父元素继承
  • content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
content 属性值 描述
none 设置 content，如果指定成 Nothing
normal 设置 content，如果指定的话，正常，默认是 “none”（该是 nothing）
counter 设定计数器内容
attr (attribute) 设置 content 作为选择器的属性之一
string 设置 Content 到你指定的文本
open-quote 设置 content 是开口引号
close-quote 设置 content 是闭合引号
no-open-quote 如果指定，移除内容的开始引号
no-close-quote 如果指定，移除内容的闭合引号
url (url) 设置某种媒体（图像，声音，视频等内容）
inherit 指定的 content 属性的值，应该从父元素继承

  • 以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h2> 元素的计数值都会递增，并在每个 <h2> 元素前添加 “Section <计数值>:”

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        body {
            counter-reset: section;
        }

        h2::before {
            counter-increment: section;
            content: "Section "counter(section) ": ";
        }
    </style>
    1
    2
    3
    4
    5
    6
    <body>
        <h1>使用 CSS 计数器:</h1>
        <h2>HTML 教程</h2>
        <h2>CSS 教程</h2>
        <h2>JavaScript 教程</h2>
    </body>

  • 效果


    使用 CSS 计数器:


    Section 1: HTML 教程


    Section 2: CSS 教程


    Section 3: JavaScript 教程


2、嵌套计数器

  • 以下实例在页面创建一个计数器，在每一个 <h1> 元素前添加计数值 “Section <主标题计数值>.”, 嵌套的计数值则放在 <h2> 元素的前面，内容为 “<主标题计数值>.<副标题计数值>“。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <style>
        body {
            counter-reset: section;
        }
        h1 {
            counter-reset: subsection;
        }
        h1::before {
            counter-increment: section;
            content: "Section "counter(section) ": ";
        }
        h2::before {
            counter-increment: subsection;
            content: counter(section) "."counter(subsection) " ";
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <body>
        <h1>HTML 教程:</h1>
        <h2>HTML 教程</h2>
        <h2>CSS 教程</h2>

        <h1>Scripting 教程:</h1>
        <h2>JavaScript</h2>
        <h2>VBScript</h2>

        <h1>XML 教程:</h1>
        <h2>XML</h2>
        <h2>XSL</h2>
    </body>

  • 效果


    Section 1: HTML 教程:


    1.1 HTML 教程


    1.2 CSS 教程



    Section 2: Scripting 教程:


    2.1 JavaScript


    2.2 VBScript



    Section 3: XML 教程:


    3.1 XML


    3.2 XSL


3、实例

  • 计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        ol {
            counter-reset: section;
            list-style-type: none;
        }
        li::before {
            counter-increment: section;
            content: counters(section, ".") " ";
        }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <ol>
        <li>item</li>
        <li>item
            <ol>
                <li>item</li>
                <li>item</li>
                <li>item
                    <ol>
                        <li>item</li>
                        <li>item</li>
                        <li>item</li>
                    </ol>
                </li>
                <li>item</li>
            </ol>
        </li>
        <li>item</li>
        <li>item</li>
    </ol>

    <ol>
        <li>item</li>
        <li>item</li>
    </ol>

  • 效果



    1. item

    2. item

      1. item

      2. item

      3. item

        1. item

        2. item

        3. item



      4. item



    3. item

    4. item




    1. item

    2. item


4、CSS 实例

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、使用计数器自动编号
  3. 3. 2、嵌套计数器
  4. 4. 3、实例
  5. 5. 4、CSS 实例
隐藏目录