霍者博客

CSS3内容处理-在编号中追加文字

上一篇博文里,我们学习了如何对元素编号,但是仅仅追加了编号还不能满足我们的要求,比如我想要每个标题不单单是数字编号,如下“图1”改为“图2”样式该怎么办呢?

[图1]

[图2]

其实很简单,参考如下代码:

元素{counter-increment:index;}/*首先定义一个计数器的名字,名字可随便起,就像js中定义变量一样*/

元素:before{content:counter("第"index"章:");}/*在此处引用计数器,然后将其计数器插入,并将固定的文字在其中加入与计数器进行拼接,即可实现带有固定文字格式的连续编号*/

我们来看一下,完整的代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf8">
        <title>CSS3内容处理-在编号中追加文字 | 霍者博客(huozheweb.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
                body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
                h2{counter-increment:myCounter;}
                h2:before{content:"第"counter(myCounter)"章:";}
        </style>
    </head>
    
    <body>
        <h2>大标题:霍者博客(huozheweb.com)!</h2>
        <p>霍者博客是一个值得收藏的网站.</p>
        <h2>大标题:霍者博客(huozheweb.com)!</h2>
        <p>霍者博客是一个值得收藏的网站.</p>
        <h2>大标题:霍者博客(huozheweb.com)!</h2>
        <p>霍者博客是一个值得收藏的网站.</p>
        <h2>大标题:霍者博客(huozheweb.com)!</h2>
        <p>霍者博客是一个值得收藏的网站.</p>
        <h2>大标题:霍者博客(huozheweb.com)!</h2>
        <p>霍者博客是一个值得收藏的网站.</p>
    </body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/709.html,标题:CSS3内容处理-在编号中追加文字

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。