CSS中的content属性使用教程

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

<span><p lang=“en”>English</p></span>     
<span><p lang=“zh”>中文</p></span>  
 

CSS

CSS Code复制内容到剪贴板

p:lang(zh){quotes: “«” “»” “‹” “›” }      
p:lang(en){quotes: ’“‘ ’”‘ “‘” “‘” }      
span:before{      
    content:no-open-quote;      
    }      
span:after{      
    content:no-close-quote;      
    }      
p:before{      
    content:open-quote;      
    }      
p:after{      
    content:close-quote;      
    }    

 
计数器
       
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;