CSS3 counter 计数器

最新推荐文章于 2024-07-08 11:11:07 发布

原创最新推荐文章于 2024-07-08 11:11:07 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

转载请注明出处——https://blog.youkuaiyun.com/chy555chy

文章标签：

#css #counter

CSS3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍CSS计数器的基本用法及如何通过counter-reset、counter-increment等属性进行计数，并演示了如何利用content属性在伪元素::before和::after中生成带有不同计数器样式的编号。此外，还提供了自定义计数器样式表的格式及实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考 http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/
参考 https://www.w3cplus.com/css3/css-counters.html

定义

name	syntax	description
counter-reset	[<indentifier> <integer>?]+\|none \|inherit	定义计数器和初始值，当元素display：none时，该属性失效
counter-increment	[<indentifier> <integer>?]+\|none	增加计数器
counter	[counter(name)] \| [counter(name,list-style-type)]	在content属性中使用，用来调用计数器求值
counters	[counters(name,string)] \| [counters(name,string,list-style-type)]	在content属性中使用，用来调用计数器求值
counter-style		计数器样式
content		在 ::before 和 ::after 中生成内容

counter-style

系统预定义的计数器样式

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

<html>
<head>
<meta charset="utf-8">
<style>
div{
    counter-reset: value 1;
} 
.disc::before{ content: counter(value, disc) ' - '} 
.circle::before { content:counter(value, circle) ' - '} 
.square::before { content:counter(value, square) ' - '} 
.decimal::before { content:counter(value, decimal) ' - '} 
.lower-roman::before { content:counter(value, lower-roman) ' - '} 
.upper-roman::before { content:counter(value, upper-roman) ' - '} 
.lower-alpha::before { content:counter(value, lower-alpha) ' - '} 
.upper-alpha::before { content:counter(value, upper-alpha) ' - '} 
.none::before { content:counter(value, none) ' - '} 
.armenian::before { content:counter(value, armenian) ' - '} 
.cjk-ideographic::before { content:counter(value, cjk-ideographic) ' - '} 
.georgian::before { content:counter(value, georgian) ' - '} 
.lower-greek::before { content:counter(value, lower-greek) ' - '} 
.hebrew::before { content:counter(value, hebrew) ' - '} 
.hiragana::before { content:counter(value, hiragana) ' - '} 
.hiragana-iroha::before { content:counter(value, hiragana-iroha) ' - '} 
.katakana::before { content:counter(value, katakana) ' - '} 
.katakana-iroha::before { content:counter(value, katakana-iroha) ' - '} 
.lower-latin::before { content:counter(value, lower-latin) ' - '} 
.upper-latin::before { content:counter(value, upper-latin) ' - '} 
</style>
</head>
<body>
<table>
<div class="disc">This is the disc</div>
<div class="circle">This is the circle</div>
<div class="square">This is the square</div>
<div class="decimal">This is the decimal</div>
<div class="lower-roman">This is the lower-roman</div>
<div class="upper-roman">This is the upper-roman</div>
<div class="lower-alpha">This is the lower-alpha</div>
<div class="upper-alpha">This is the upper-alpha</div>
<div class="none">This is the none</div>
<div class="armenian">This is the armenian</div>
<div class="cjk-ideographic">This is the cjk-ideographic</div>
<div class="georgian">This is the georgian</div>
<div class="lower-greek">This is the lower-greek</div>
<div class="hebrew">This is the hebrew</div>
<div class="hiragana">This is the hiragana</div>
<div class="hiragana-iroha">This is the hiragana-iroha</div>
<div class="katakana">This is the katakana</div>
<div class="katakana-iroha">This is the katakana-iroha</div>
<div class="lower-latin">This is the lower-latin</div>
<div class="upper-latin">This is the upper-latin</div>
</table>
</body>
</html>

这里写图片描述

自定义计数器样式表的格式

@counter-style counerStyleName{
    system:算法；
    range:使用范围；
    symbols:符号；
    additive-symbols:符号；
    prefix：前缀；
    suffix:后缀；
    pad:补零(eg.01,02,03);
    negative:负数策略；
    fallback:出错后的默认值；
    speakas:语音策略；
}

应用范例

<html>
<head>
<meta charset="utf8">
<style>
.reset { 
    padding-left: 20px; 
    counter-reset: wangxiaoer 0; 
    line-height: 1.6; 
    color: #666; 
}
.counter:before { 
    content: counters(wangxiaoer, '-', upper-roman) '. '; 
    counter-increment: wangxiaoer 1; 
    font-family: arial black;
}
</style>
</head>
<body>
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>
</body>
</html>

这里写图片描述