码云前端 2020-05-19

css3 伪类content属性实现行号自动递增

AI 概述

CSS Counters 用到的属性counter-resetcounter-incrementcontentcounter()我项目中的使用网上例子正如标题，这也是我最近项目中遇到的需求，这个例子很简单，相信大家都会有很多种方法来实现这一效果。在很早之前，计数器仅存在于 ul，ol 等元素中，如何想给其他元素增加计数，就只能通过list-style-i...

文章目录隐藏

CSS Counters 用到的属性

counter-reset
counter-increment
content
counter()

我项目中的使用

网上例子

正如标题，这也是我最近项目中遇到的需求，这个例子很简单，相信大家都会有很多种方法来实现这一效果。在很早之前，计数器仅存在于 ul，ol 等元素中，如何想给其他元素增加计数，就只能通过list-style-image，或者background-image来实现。而我的布局结构恰恰没有到 ul ol 等元素，所以如果是想要给其他元素增加计数效果就只能另想它法，

正好css3增加了counter属性，可以实现任何元素的计数作用。不过这个 counter 属性还需要配合其他 css 属性一起才能有效果。

虽然很简单，但是用到了 css3 的 counter 属性，很久没用这个属性了，正好来回忆一下知识点，做一个笔记，方便日后查看，所谓“温故而知新”大概就是这个意思，我们还是从基础说起。

CSS Counters 用到的属性

前面也提到过，使用 CSS Counters 给元素创建自动递增计算器不仅仅是依赖于某一个 CSS 属性来完成，他需要几个属性一起使用才会有效果。使用的到属性包括：

counter-reset：此值是必需的。必须用于选择器，主要用来标识该作用域，其值可以自定义。
counter-increment：用来标识计数器与实际相关联的范围。
content：用来生成内容，其为:before、:after或::before、::after的一个属性。在生成计数器内容，主要配合 counter()一起使用。
counter()：该函数用来设置插入计数器的值。
:before、:after或::before、::after：配合content用来生成计数器内容。

要想完全了解或者熟练使用好 CSS Counters来创建计数器，就需要对用到的每个属性的使用规则有一定的了解。接下来就先简单的了解这几个属性。

counter-reset

语法规则

counter-reset:[ <identifier> <integer>? ]+ | none | inherit

取值说明

counter-reset 的默认值为 none，其主要取值包括两个部分：

identifier：用来定义计数器的名称，这个名称可以自定义，如：item。而且后面可以紧跟一个整数值，中间用空格分隔开来，如 headings 0；
integer：此值用来设置调用计算数器时起始值，默认值为 0。

功能描述

counter-reset主要功能用来标识计数器作用域，而且此值必须用在选择器上，必且是不能缺少的。共包括两个部分，第一个部分是自定义计数器名称，这一部分是必需的。第二部分是计数器起始值，此值是可选的。默认值为 0。此值告诉标识组起始值是什么，所以说这个值非常有价值。因为，如果你设置的值为 0，那么计数从 1 开始；如果你设置的值是-5，那么计数从-4 开始。依此类推。

counter-reset自定义计数器名称时可以随意取名，但此名不能是 CSS 的关键词，比如 none、inherit 之类。

counter-reset属性可以包含一个或者多个计数器标识符，每个后面都可以跟一个整数值，如 section 0 heading 0。如果元素都重置，并且增加一个计数器，计数器是第一次重置，后面值就会递增。如果不止一次指定同一个计算器，则将按指定的计数器做递增。

counter-increment

语法规则

counter-increment:[ <identifier> <integer>? ]+ | none | inherit

默认值为 none。其值也包括两个部分：

identifier：计数器名称，就调用counter-reset声明的计数器的标识符。
integer：一个整数值，指定计数起始值。其值允许是 0 或者负整数值，如果未指定任何值，则该值为 1（前提是 counter-reset 未显式设置计数的起始值）。其值递增是按倍数值递增，如果设置了值为 2,后面元素递增值为 4、6、8，依此类推。

功能描述

counter-increment属性是用来标识计数器与实际相关联元素范围。其第一个值是必需的，获取 counter-reset 定义的标识符。

counter-ncrement第二个值是一个可选值，是一个整数值，可以是正整数，也可以是负整数。主要用来预设递增的值，如果取值为负值时，表示递减。默认值为 1。

content

content是和伪类:before、:after或者伪元素::before、::after配合在一起使用，主要功能用来生成内容。

counter()

counter()是一个函数，其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。

counter()函数接受两个参数，而且两参数之间使用逗号(,)来分隔。第一个参数是counter-increment定义的属性值,用来告诉该文档插入的计数器标识符名称是什么。第二个是用来设置计数器的风格，有点类似于list-style-type。默认情况之下取值为十制，但你也可以重置这个样式风格，比如upper-roman或者upper-alpha等。

counter()函数第二个值与列表中的 list-style-type 值相等：

注释：如果使用了“display:none”，则无法增加计数。如使用“visibility:hidden”，则可增加计数。

我项目中的使用

HTML 代码

<pre>
  <code class="html hljs xml">
  <span class="code_ids"></span>
  </code>
</pre>

CSS 代码

.code-show {
        pre{
            max-height: 463px;
        }
        code{
            max-height: 450px;
            overflow: auto;
            padding-left: 50px;
            counter-reset: step;
            counter-increment: step 0;
            position: relative;
        }
        pre,
        code {
            counter-reset: step;
            display: block;
            white-space: pre;
            /* css-3 */
            white-space: -moz-pre-line;
            /* Mozilla, since 1999 */
            white-space: -pre-line;
            /* Opera 4-6 */
            white-space: -o-pre-line;
            /* Opera 7 */
            /* Internet Explorer 5.5+ */
            white-space: pre;
            /* Firefox */
        }
        code .code_ids:before {
            color: #516363;
            position: absolute;
            left: 5px;
            counter-increment: step;
            content: counter(step);
            width: 25px;
            border-right: 1px solid #c5c5c5;
            text-align: right;
            padding-right: 10px;
        }
        .code_ids {
            line-height: 1.4em;
        }
    }

效果如下：

网上例子

<html>
 <head></head>
 <body>
  <div class="box"> 
   <ul> 
    <li> <a href="#">码云笔记 - mybj123.com</a> 
     <ul> 
      <li><a href="#">前端技术</a></li> 
      <li><a href="#">JavaScript</a></li> 
      <li><a href="#">HTML/CSS</a></li> 
     </ul> </li> 
    <li> <a href="#">源码</a> 
     <ul> 
      <li><a href="#">JavaScript</a></li> 
      <li><a href="#">html</a></li> 
      <li><a href="#">css</a></li> 
     </ul> </li> 
    <li><a href="#">typescript</a></li> 
    <li><a href="#">node.js</a></li> 
    <li><a href="#">vue.js</a></li> 
   </ul> 
  </div>
 </body>
</html>

CSS 代码

* {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: #fff;
}

li {
    list-style: none;
}

body {
    font-size: 14px;
    font-family: "微软雅黑";
}

.box {
    width: 300px;
    margin: 100px auto;
    background-color: #234D3C;
}

.box ul li {
    padding-left: 10px;
    border-bottom: 1px solid #fff;
    counter-increment: test;
}

.box ul li:before {
    content: counter(test)".";
    padding-right: 12px;
    color: red;
}

.box ul li li {
    counter-increment: test2;
}

.box ul li li:before {
    content: counter(test)"-"counter(test2)".";
    padding-right: 12px;
    color: red;
}

效果如下：

以上关于css3 伪类content属性实现行号自动递增的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » css3 伪类content属性实现行号自动递增