【CSS】关于content
content实际上我们大部分情况已经用过了，今天阅读《css权威指南》发现有很多之前不知道的点，现加以记录。
content只适用于:before 和:after这两个伪元素。
MDN 上面关于content的语法解释如下：
Formal syntax: normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+
当值为string 和 uri直接查看MDN解释 很容易理解
我们来看一下其他特殊值：
open-qoute | close-quote 顾名思义我们可以理解成开始引用 和 闭合引用 ，举个例子：html代码长这样
<style>
q::before {
content: open-quote;
}
</style>
<p>
<q>
this is the text
</q>
</p>最后代码的效果是这样的：
你可能会奇怪，我们根本没有添加p::after { content: close-quote}, 但是用户代理自动帮我们加上了这一个close-quote; 这个开始和闭合引用默认值是", 同样的如果我们只写闭合引用用户代理还是会在文本前后都加上各自的引用。
如果你只想在文本前面加上一个",你需要手动加上这样一句： p::after{content: no-close-quote}
tip： p::before{content: close-quote} 是不会生效的。before只能对应open-quote, after同理。
当然你也可以自定义open-quote 和 close quote.这时候就需要新的属性quotes
我们将上面的代码修改一下
<style>
q{
quotes: '<' '>'
}
q::before {
content: open-quote;
}
</style>
<p>
<q>
this is the text
</q>
</p>然后效果是这样：
quotes还可以这样定义: quotes: '"' '"' "'" "'" 这样就是嵌套的引用， 内层的会使用'和'。当然你也可以嵌套更多层，优先级是从左到右对应层级由高到低。
比如现在代码长这样：
<style>
q {
quotes:'"' '"' "'" "'";
}
</style>
<p>
<q>
<q>飘</q> this is the text
</q>
</p>最后的效果是这样：
好,我们来说另外的特殊值 counter, 顾名思义，计数，就叫他计数器吧，计数器肯定要有起点和计数增量。
counter-reset 这个类似于定义了一个变量，语法是这样的 : counter-reset: counter-name number, 后面的数字默认是0 可以不用写。 并且可以同时定义多个 计数器的起点，以空格分割
counter-increment 这个类似于定义某个变量的 增量单位 ，语法： counter-increment: counter-name number, 同样后面的数字也是可以省略的，但是默认为1，可以为负数。 增量并且可以同时定义多个 计数器的起点，以空格分割
[counter-reset: charpter 0, counter-reset: charpter] 和 [counter-increment: charpter 1, `counter-increment: charpter ] 这两组方括号里面的一对定义是等价的。
最简单的例子:
<style>
ul {
counter-reset: ordered; /**一般我们定义计数器的起点都是在父节点上面定义*/
list-style: none;
}
ul li:before {
counter-increment: ordered;
content: counter(ordered)" " /**这里将string 和 counter 一起来使用，加上空格字符串是为了调整item的内容与 number的距离*/
}
</style>
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
效果是这个样子：
参考MDN页面的例子，也可以实现嵌套。 小tip ： 也可以实现字母的增加(可以自己在浏览器里面试试下面的代码 )：
<style>
ul.character {
counter-reset: chapter;
list-style: none;
}
ul.character li:before {
counter-increment: chapter;
content: counter(chapter, upper-alpha)" ";
}
</style>
<ul class="character">
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>实际上content的计数器内容，我在实际工作中没有遇到，但是travis-ci的日志就利用了这个：
好，接下来还有content最后一个特殊内容，指定属性值，实际上就是 content显示元素某个属性的值，github的代码行数就是这样来的，很容易理解，请看下面的图（其他的以此类推）：
