CSS内容生成（重要内容：css计数器）

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：为多语言内容插入正确的引号

         使用标签，默认外层为 “ ，内层为 ’

         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

CSS内容生成（重要内容：css计数器）