CSS学习之六：生成内容
文本主要展示CSS content及其相关的属性的一些使用技巧:
•:before和:after伪元素
•content属性
•CSS quotes与content属性的结合使用
•计数器
它们的基本介绍请参考：CSS content, counter-increment 和 counter-reset介绍及用法
1、插入生成内容
使用:before 和:after伪元素结合content属性，就可以在页面内任何一个元素前或后插入内容，比如下面这个声明，可以在具有href属性的链接的前面加上字符串“(link)”：
a[href]:before { content: "(link)"; }
生成内容的样式继承与之关联元素的样式，除非给它添加额外的样式，比如要使插入的字符串颜色是灰色的，样式这么写即可：
a[href]:before { content: "(link)"; color: gray; }
如图所示：
2、指定内容（content属性）
CSS content 属性可以包括这些值：attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url(url)
作用是用来和 :after 及 :before 伪元素一起使用，在对象前或后显示内容。
要注意的是串值会原样输出，比如下面的规则：
h2:before { content: "<em>¶</em>"; color: gray; }
会生成如下的效果：
content属性的串值要包括任何非ASCII字符集或实体，在CSS和XHTML中声明该字符，并/或为该字符使用ISO编码(如：”\00a3″)。，详细请参考：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
插入属性值：
使用attr值可以插入alt文本、class或id值以及任何属性，比如以下的规则可以实现插入超链接的链接地址而不使用js：
a:hover:after {
background-color: #008000;
content: attr(href);
color: #FFF;
font-size: .8em;
line-height: 1.2em;
position: absolute;
top: -1.2em;
left: 0;
}
3、生成引号
CSS quotes属性值包括：[<string> <string>] |none|inherit
string：用引号括起的嵌套标记定义。两个为一组。第一个 string 定义前标记（例："<"），第二个 string 定义后标记（例：">"）。组之间用空格格开。嵌套标记的应用深度按定义顺序内推；
none：content 属性的 open-quote 和 close-quote 值将不会生成任何嵌套标记；
inherit：取决于具体的用户代理。
使用content属性的open-quotes值和close-quotes值以及quotes属性，使得生成引号的管理成为可能。一般是在content属性中定义引号，然后用quotes属性控制引号的“开”与“关”，如有以下HTML结构：
<div class="text"> <dl> <dt>中国四大名著</dt> <dd>三国演义</dd><address>罗贯中</address><br /> <dd>水浒传</dd><address>施耐庵</address><br /> <dd>西游记</dd><address>吴承恩</address><br /> <dd>红楼梦</dd><address>曹雪芹</address><br /> </dl> </div>
样式：
.text dd, .text address { quotes: "\300A" "\300B"; display: inline; }
.text dd:before { content: open-quote; }
.text dd:after { content: close-quote; }
dd + address:before { content: "（"; display: inline; }
dd + address:after { content: "）"; display: inline; }
会在名著前后添加书名号，在左前前后添加括号。
不过多层嵌套时各浏览器解析有很大的差别，比如有下面的结构：
<blockquote> In the begining,there was nothing.And God said:<q>Let there be ligth!</q>And there was still nothing,but you could see it. </blockquote>
样式如下：
blockquote { quotes: '\201C' '\201D' '\2018' '\2019'; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }
blockquote q:before { content: open-quote; }
blockquote q:after { content: close-quote; }
在safari 5 显示不正常，blockquote前后无引号，q前后出现双引号。
4、计数器
CSS的counter-reset和counter-increment属性值包括：[<string> <string>] |none|inherit
counter-reset设置计数器的起点；counter-increment能将其递增一定的量。
假设有如下HTML结构：
<h1>The secret Life of Salmon</h1> <h2>Introduction</h2> <h2>Habitats</h2> <h3>Ocean</h3> <h3>Rivers</h3> <h2>Spawning</h2> <h3>Fertilization</h3> <h3>Gestation</h3> <h3>Hatching</h3>
对它使用计数器在标题前面添加所需要的列表项：
h1 {
counter-increment: chapter;/* 在每个h1的前面添加计数器 */
counter-reset: section subsec;/* 并在每一个h1后面重设h2的计数器 */
}
h1:before {
content: counter(chapter) ". ";
}
h2 {
counter-increment: section;/* 在每个h2的前面添加计数器 */
counter-reset: subsec;/* 并在每一个h2后面重设h3的计数器 */
}
h2:before {
content: counter(chapter) "." counter(section) ". ";
}
h3 {
counter-increment: subsec;/* 在每个h3的前面添加计数器 */
}
h3:before {
content: counter(chapter) "." counter(section) "." counter(subsec) ". ";
}
可以产生类似目录的结构，查看Demo
另外，可以改变计数器的默认值，采用大小写字母和数字混合的方式显示列表项：
h1 {
counter-increment: chapter;/* 在每个h1的前面添加计数器 */
counter-reset: section 0 subsec;/* 并在每一个h1后面重设h2的计数器 */
/* 若“标识符-整数”对没有指定整数，则默认为0（counter-increment属性则为1），且数值可以为负 */
}
h1:before {
content: counter(chapter,upper-alpha) ". ";
/* 没有为计数器指定关键字，默认为decimal计数样式。*/
}
h2 {
counter-increment: section;/* 在每个h2的前面添加计数器 */
counter-reset: subsec;/* 并在每一个h2后面重设h3的计数器 */
}
h2:before {
content: counter(chapter,upper-alpha) "." counter(section) ". ";
}
h3 {
counter-increment: subsec;/* 在每个h3的前面添加计数器 */
}
h3:before {
content: counter(chapter,upper-alpha) "." counter(section) "." counter(subsec,lower-roman) ". ";
}
对于嵌套比较复杂的HTML结构，如果使用计数器，可以使用content的counters值实现，如下面表示目录的有序列表：
代码
<ol style="counter-reset: ordered -1;/* 使有序列表项从1开始 */">
<li><a href="#" title="前言">前言</a></li>
<li>第1章
<ol>
<li><a href="#" title="第1.1节">第1.1节</a></li>
<li><a href="#" title="第1.2节">第1.2节</a>
<ol>
<li><a href="#" title="第1.2.1节">第1.2.1节</a></li>
<li><a href="#" title="第1.2.2节">第1.2.2节</a></li>
<li><a href="#" title="第1.2.3节">第1.2.3节</a></li>
</ol>
</li>
<li><a href="#" title="第1.3节">第1.3节</a></li>
</ol>
</li>
<li>第2章
<ol>
<li><a href="#" title="第2.1节">第2.1节</a></li>
<li><a href="#" title="第2.2节">第2.2节</a></li>
<li><a href="#" title="第2.3节">第2.3节</a></li>
</ol>
</li>
<li>第3章
<ol>
<li><a href="#" title="第3.1节">第3.1节</a></li>
<li><a href="#" title="第3.2节">第3.2节</a></li>
<li><a href="#" title="第3.3节">第3.3节</a></li>
</ol>
</li>
</ol>
只需添加如下的样式即可实现可自动增加的列表项：
ol { counter-reset: ordered; margin-left: 2em; list-style-type: none; }
ol li:before {
counter-increment: ordered;
content: counters(ordered,".") " - ";
/* content: counters(ordered,".",lower-alpha) " - ";列表项会使用小写字母 */
}
想了解更多CSS content的运用，请移步：CSS content内容生成技术以及应用，这些高手们讲的很精辟。
（全文完）
