content属性早在css2.1的情况下就被引入了,能够应用:before及其:after伪元素转化成内容。content属性如今早已获得绝大多数电脑浏览器的支持,有关content属性的支持状况能够在caniuse.com网站上开展搜索,一下为现阶段它的支持状况:

css counter计数器与content总结 计数器 Counter css CSS  第1张

  content属性最普遍的是相互配合:before或:after来转化成内容,默认设置宣称的原素为行内元素:

  之上段编码的功效为在类名叫test的div内容的前后左右再加content中的内容,在content以后还能够设定其他款式,在这儿,content等同于伪元素的激话标示,是不可或缺的。

div.test:before{
    content: "我还在div以前"; 
}
div.test:after{
     content:"我还在div以后";
}

  content属性的值除开应用文字值以外,还能够根据attr()方式 来应用其他标识的属性值:

a.test:after{
    content: attr(href);
}

<a class="test" href="http://www.taobao.com/">欢迎光临 </a>

  css电子计数器出現的较为早,但近期才刚开始掌握。因为css电子计数器只有跟content属性一起应用时才有功效,而content属性常常与:before和:after伪元素配搭应用,因此就有益电子计数器,伪元素,content中间不可缺少的关联。css电子计数器关键包括2个属性和一个方式 ,各自为:

  1. counter-reset

  该属性界定电子计数器的名字,能够另外界定好几个电子计数器,界定数据时意味着初值,默认设置默认设置为0:

div.count{
    counter-reset: count1 count2;
}

  如上编码界定2个电子计数器count1和count2,原始默认设置为0。

  2. counter-increment

  该属性接受2个主要参数,第一个主要参数意味着电子计数器的名字,第二个意味着每一次增长的值,默认设置时默认设置为1

div.count:before{
    counter-increment: count1 2;
}

  此番编码界定电子计数器count1一次自升值为,这时电子计数器默认设置初值为0 2=2;若这儿将数字2默认设置,则默认设置自升值为1,这时电子计数器初值为0 1=1。

  3. counter()/counters()

  该方式 为电子计数器启用方式 ,接受2个主要参数,第一个主要参数为电子计数器名字,第二个为标值种类,出来对本实例开展一个小训练:

<!doctype html>
<html>
    <head>
         <meta charset="utf-8">
         <title>counter&content</title>
         <style>
                div.conter{
                    margin-left: 50px;
                    couter-reset: count; /* 界定电子计数器count */
                }
               .conter p{
                     height: 40px;
                     border: 1px solid #ffe000;
                }
               .conter p:before{
                     content: counter(count,decimal) "." /*启用电子计数器 并在数据后加上.*/
                     counter-increment: count;
                }
         </style>
    </head>
    <body>
         <div class="conter">
               <p>文章段落1</p>
               <p>文章段落2</p>
               <p>文章段落3</p>
               <p>文章段落4</p>
               <p>文章段落5</p>
         </div>
    </body>
</html>

最后結果以下:

css counter计数器与content总结 计数器 Counter css CSS  第2张

到此这篇有关css counter电子计数器与content小结的文章内容就详细介绍到这了,大量有关css counter电子计数器内容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的支持!