CSS content 属性
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。
注意:
仅在CSS可用的现代浏览器下起作用。
不可通过DOM使用,它只是纯粹的表象。
content属性的值:
1.文本值,如:content:”这是添加的文字”
2.属性值,如:content:”attr(id)”//这句话将会获取元素的id属性的值,并作为内容添加
应用1:计数器
(counter-reset和counter-increment)
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性,计数器可以设置或重置为任何值,可以是正值或负值。如果没有提供 number,则默认为 0。
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
利用这个属性,计数器可以递增(或递减)某个值,这可以是正值或负值。如果没有提供 number 值,则默认为 1。
应用2:为多语言内容插入正确的引号
使用<q>标签,默认外层为 “ ,内层为 ’
quotes 属性设置嵌套引用(embedded quotation)的引号类型。
应用3:图片替换文字
缺点:不能对图片进行重复或平铺,或是使用image sprite
应用4:显示相对应的链接图标
指的是针对不同的链接类型,在链接的后面显示对应链接类型的图标。
例如,链接的对象是一个图片,则显示图片的小图标,如果链接对象是视频,则显示视频小图标,如果链接就是个URL网页链接,则显示链接的小图标
重点:
CSS计数器
1.counter-reset:重置计数器。
counter-reset 可以同时重置多个计数器。Counter-reset:ctr 1 subctr 2; //这里同时重置了ctr和subctr两个计数器
2.counter-increment
3.counter():是一个函数,其主要配合content一起使用。使用counter()来调用定义好的计数器标识符。
counter(name, style)
第二个参数style:可以不设置。
取值和list-style-type一样
counters(name, string, style)
第二个参数string:可以设置,连接序号的字符
实例地址:http://benlai.sinaapp.com/code/css_content.html
参考文章:http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/
http://www.w3cplus.com/css3/css-counters.html