帝王谷资源网

css counter计数器与content总结
网页制作 2024/12/26 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

　　content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于content属性的支持情况可以在caniuse.com网站上进行查找，一下为目前它的支持情况：

css counter计数器与content总结

　　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计数器主要包含两个属性和一个方法，分别为：

　　1. counter-reset

　　该属性定义计数器的名称，可以同时定义多个计数器，定义数字时代表初始值，缺省默认为0：

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

　　如上代码定义两个计数器count1和count2，初始默认为0。

　　2. counter-increment

　　该属性接收两个参数，第一个参数代表计数器的名称，第二个代表每次递增的值，缺省时默认为1

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

　　此行代码定义计数器count1单次自增值为，此时计数器默认初始值为0+2=2；若这里将数字2缺省，则默认自增值为1，此时计数器初始值为0+1=1。

　　3. counter()/counters()

　　该方法为计数器调用方法，接收两个参数，第一个参数为计数器名称，第二个为数值类型，下来对本案例进行一个小练习：

<!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总结

标签：
css,counter,计数器
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接