CSS3 counter 计数器

本文介绍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

定义

namesyntaxdescription
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>

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值