伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器，伪元素选择器只能针对CSS中已有的伪元素起作用。
CSS提供的伪元素选择器有如下几个。
➢ :first-letter：该选择器对应的CSS样式对指定对象内的第一个字符起作用。
➢ :first-line：该选择器对应的CSS样式对指定对象内的第一行内容起作用。
➢ :before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
➢ :after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容。
first-letter选择器
下面先看:first-letter伪元素选择器的用法。:first-letter选择器仅对块元素（如<div.../>、<p.../>、<section.../>等元素）起作用。如果想对内联元素（如<span.../>等元素）使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。通过该选择器配合font-size、float属性可制作首字下沉效果。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :first-letter </title>
<style type="text/css">
span {
display:block;
}
/* span元素里第一个字母加粗、变蓝
由于span是内联元素，因此需要先把span的display设为block
*/
span:first-letter{
color:#f00;
font-size:20pt;
}
/* section元素里第一个字母加粗、变蓝 */
section:first-letter{
color:#00f;
font-size:30pt;
font-weight:bold;
}
/* p元素里第一个字母加粗、变蓝 */
p:first-letter{
color:#00f;
font-size:40pt;
font-weight:bold;
}
</style>
</head>
<body>
<span>abc</span>
<section>其实我是一个程序员</section>
<p>疯狂Java讲义</p>
</body>
</html>
first-line选择器
:first-line选择器同样只对块元素（如<div.../>、<p.../>、<section.../>等元素）起作用。如果要对内联元素（如<span.../>等元素）使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。如果没有通过width属性为HTML元素设置宽度，该元素的宽度可能随浏览器窗口的大小发生改变，这样第一行内容的长度可能会变化。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> :first-line </title>
<style type="text/css">
span {
display:block;
}
/* span元素里第一行文字的字体加大、变红
由于span是内联元素，因此需要先把span的display设为block
*/
span:first-line{
color:#f00;
font-size:20pt;
}
/* section元素里第一行文字的字体加大、变蓝 */
section:first-line{
color:#00f;
font-size:30pt;
}
/* p元素里第一行文字的字体加大、变蓝 */
p:first-line{
color:#00f;
font-size:30pt;
}
</style>
</head>
<body>
<span>abc<br/>xyz</span>
<section>去年今日此门中，<br/>
人面桃花相印红。</section>
<p style="width:160px">疯狂Java讲义</p>
</body>
</html>
:before、:after伪元素选择器
此处先介绍的内容相关的属性，与前面用过的color、font-size等CSS属性的本质是相同的。这些内容相关的属性同样需要定义在CSS样式的花括号（{}）里面。
CSS支持的内容相关的属性有如下几个。
➢ include-source：该属性的值应为url(url)，插入绝对或相对URL地址所对应的文档。目前还没有浏览器支持该属性，故此处不会详述该属性的用法。
➢ content：该属性的值可以是字符串、url(url)、attr(alt)、counter(name)、counter(name, list-style-type)、open-quote、close-quote等格式。该属性用于向指定元素之前或之后插入指定内容。
➢ quotes：该属性用于为content属性定义open-quote和close-quote，该属性的值可以是两个以空格分隔的字符串，其中前面的字符串是open-quote，后面的字符串是close-quote。
➢ counter-increment：该属性用于定义一个计数器。该属性的值就是所定义的计数器的名称。
➢ counter-reset：该属性用于对指定的计数值复位。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> content </title>
<style type="text/css">
/* 指定对于div元素内部的前端插入content属性对应的内容 */
div>div:before{
content: 'CrazyIt:';
color:blue;
font-weight:bold;
background-color:gray;
}
</style>
</head>
<body>
<div>
<div>疯狂Java讲义</div>
<div>疯狂Android讲义</div>
<div>轻量级Java EE企业应用实战</div>
</div>
</body>
</html>
使用自定义编号
CSS默认添加的编号都是数值编号，这种编号能满足大部分的应用场景，但有些时候还需要自定义编号，例如使用非数字编号（比如使用罗马字母编号）。这种需求可通过counter(name, list-style-type)用法来实现，其中list-style-type指定编码风格，该参数支持如下值。
➢ decimal：阿拉伯数字。默认值。
➢ disc：实心圆。
➢ circle：空心圆。
➢ square：实心方块。
➢ lower-roman：小写罗马数字。
➢ upper-roman：大写罗马数字。
➢ lower-alpha：小写英文字母。
➢ upper-alpha：大写英文字母。
➢ none：不使用项目符号。
➢ cjk-ideographic：浅白的表意数字。
➢ georgian：传统的乔治数字。
➢ lower-greek：基本的希腊小写字母。
➢ hebrew：传统的希伯莱数字。
➢ hiragana：日文平假名字符。
➢ hiragana-iroha：日文平假名序号。
➢ katakana：日文片假名字符。
➢ katakana-iroha：日文片假名序号。
➢ lower-latin：小写拉丁字母。
➢ upper-latin：大写拉丁字母。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 自定义编号 </title>
<style type="text/css">
/* 为div的子div元素定义了一个计数器：mycounter */
div>div{
counter-increment: mycounter;
}
/* 在div的子div元素的前端插入自定义风格的mycounter计数器 */
div>div:before{
content: '第' counter(mycounter , lower-greek) '本.';
font-size: 20pt;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div>疯狂Java讲义</div>
<div>疯狂Android讲义</div>
<div>轻量级Java EE企业应用实战</div>
</div>
</body>
</html>
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。