CSS中的content属性使用教程

 
计数器
       
counter相当于一个变量，根据css规则的增加以跟踪使用次数。它有三种形式：
counter-reset重置计数器默认值
counter-increment增加计数器
counter()和counters()获取计数
用法：
 

XML/HTML Code复制内容到剪贴板

<ul>     

<li><img src=“../Pictures/3BC850D9B55874714E0667170AE02FFE8349FFE0F1DDE_800_1200.jpg”/></li>     

<li><img src=“../Pictures/7A7D77703B6EFAF4E5002D0E66FFF8380F1F49A565A91_673_1010.JPEG” /></li>     

<li><img src=“../Pictures/k-10.jpg” /></li>     

</ul>    

CSS Code复制内容到剪贴板

ul{      

    countercounter-reset:photocount;      

    }      

img{      

    width:100px;}      

li{list-style:none;      

    display:inline-block;}      

li:before{      

    content:“图” counter(photocount);      

    countercounter-increment:photocount;      

    }    

counter-reset
必须定义与计数元素的父元素。默认值是从0开始的，我们可以增加一个参数来定义默认值，如counter-reset:photocount 5;，定义从5开始
       
counter-increment
一般跟随在counter()后面，用于增加计数值，默认的步长值是”1″，同样我们可以改变它，如counter-increment:photocount 2;定义步长为2
       
counter()和counters()
counter(name,style)计数的默认值是十进制，我们可以改变它的样式比如：content:counter(photocount,upper-alpha);
               
注：style值同list-style
counters(name,string,style)对于计数器嵌套则必须使用counters了，string为分割的字符，style为样式
              
代码

XML/HTML Code复制内容到剪贴板

HTML   

<ul>     

<li>项目      

    <ul>     

        <li>项目</li>     

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!