content在CSS中的使用,已经attr()获取属性,counter计数器,quotes引用的用法
2017-01-09 00:24

 content是css的一个属性,用在::before,::after伪类上面,用来在元素中添加一个内容,在content属性中我们除了可以使用文本,还可以使用attr()属性获取方法,counter计数器,quotes引用来设置content属性的内容。

    content的介绍

  content是css的属性,用在::before,::after伪类上,在元素中添加一些内容,实现一些效果。

   

  content基础用法

<div class="cotnormal">content的普通用法</div>

.cotnormal:before{content:"描述:"}

效果如下:

content.png

:before,::before的区别

:before,::before,两个都是before伪类的写法,两个冒号的::before是现代浏览器提倡的,是css3定义的但是低版本IE8-不支持;一个冒号的:before是css2定义的,所有浏览器都支持,所以最好采用一个冒号的:before来写。

:before,::before兼容性

before.png

如果你是在移动端,或者不考虑IE8,建议使用::before两个冒号的伪类写法

content使用quotes引用特性

.cotnormal{quotes:"《" "》"}
.cotnormal:before{content:open-quote;}
.cotnormal:after{content:close-quote;}
<div class="cotnormal">content的普通用法</div>

效果如下:

quotes.png

使用quotes,我们成功在内容的前后添加了特定的引用字符,当然我们也可以用我们常用的content字符串形式来实现这一个效果。

但是万物存在必有因,quotes属性能实现content字符串无法轻易实现的功能。

看下面一段代码

<div class="cotnormal">content<q>mooshine<q>前端</q></q>的普通用法</div>
.cotnormal{quotes:"《" "》" "【" "】" "(" ")"}
.cotnormal:before{content:open-quote;}
.cotnormal:after{content:close-quote;}

效果如下:

quotes2.png

quotes属性可以定义多对引用方式,第一对第一层引用起作用,第二对在第二层级引用,依次类推。

内容引用的分级一定要用 q 标签,q标签的意思就是引用的分离,q标签默认添加的引用符号是"",''依次使用。

与open-quote,close-quote对应的还有两个枚举值:no-open-quote,no-close-quote,从字面意思就可以看出,一个是不使用开始引用,一个是不使用结尾引用。

content quotes兼容性

quotescompat.png

连IE8都兼容,是不是有点出乎我们的意料啊,这个属性在文献文章类中使用的较多。

content url()

content url用来引用一个路径文件添加到一个元素中,通常是一个图片,声音,视频。

.cotnormal:before{content:url(images/resizeApi.png);}
<div class="cotnormal">content的普通用法</div>


效果如下:

contenturl.png

注意,通过url引用的图片是无法设置大小的。


content attr()

content attr()可以从元素的属性上获取属性值作为添加到元素中内容。

<div class="cotnormal" data-mo="mooshine" title="前端content介绍"></div>
.cotnormal:before{content:attr(data-mo) "->" attr(title)}

效果如下:

contentattr.png

content使用css方法attr()可以多次使用,注意它的字符串链接是没有+加号的,可以跟固定字符串连接到一起的,为了语义明确,一般用空格分割。


content counter()

content counter可以实现一个递增的计数器添加到元素内部。

<ul>
    <li>mooshine</li>
    <li>sunshine</li>
    <li>earthshine</li>
    <li>starshine</li>
    <li>lineshine</li>
</ul>
ul{counter-reset: num}
ul li{list-style:square;line-height:1.5em;}
ul li:before{counter-increment:num;content:"序号" counter(num)": ";}

效果如下:

couter.png

counter是css中用来计算符合css选择器的元素使用的次数。是在css2中定义的,也就说很早就存在,只是我们平时没有使用需求,没有接触过它而已。

counter-rest:num用来重置一个计数器变量的值为0,可以在其父类元素中定义重置。

conter-increment:num,定义自增长的计数变量。

counter(num),获取计数变量的值。

content counters()

content counters() 跟content counter(),很类似,但是,他功能更强,用来嵌套计数。counters有两个参数,第二个参数表示子计数跟父计数的链接符号。

<ul>
    <li class="first">mooshine</li>
    <li class="second">
        <ul>
            <li>sunshine</li>
            <li>sunshine_who</li>
            <li>sunshine_where</li>
        </ul>
    </li>
    <li class="three">earthshine</li>
    <li class="fourth">starshine</li>
    <li class="five">lineshine</li>
</ul>
ul{counter-reset: num}
ul li{list-style:square;line-height:1.5em;}
ul li:before{counter-increment:num;content:"序号" counters(num,"-")": ";}


效果如下:

contentcounters.png


从效果可以看出用counters的效果,同样的html结构,如果我们还是用counter的话,效果就不理想了,效果如下:


contentcounter.png

用counter的效果(上图),子计数器无法继承获取父计数器的数值。

要想实现文章章节嵌套细分的功能,我们就需要使用counters()计数器来实现。


content使用结语

只要我们使用:before一个冒号的伪类,那么上文所介绍的content的用法在IE8上都是兼容的。对于实现树结构的一个功能,使用counters计数器来区分章节是十分方便的。抛砖引玉,我所介绍的只是content的基础用法,你可以充分发挥想象力更巧妙的使用content实现更完美的功能效果。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2873)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1