CSS伪元素样式 :before 和 :after

属性　　　　描述

:first-child　选择器用于选取属于其父元素的首个子元素的指定选择器。

:first-letter　向文本的第一个字母添加特殊样式。　1

:first-line　向文本的首行添加特殊样式。　1

:before　在元素之前添加内容。　2

:after　在元素之后添加内容。　2

:focus　选择器用于选取获得焦点的元素。

:lang　选择器用于选取带有以指定值开头的 lang 属性的元素。

　

以.testdiv类为例：

.testdiv{ height:100px; width:100px; background-color:yellow;}

　

“:before” 伪元素可以在元素的内容前面插入新内容。

.testdiv:before{height:1px; width:100px; background-color:black;}

　

“:after” 伪元素可以在元素的内容之后插入新内容。

.testdiv:after{height:1px; width:100px; background-color:black;}

　

“:first-child”选择器用法举例

//选择每个<p> 中的每个<i> 元素并设置其样式，其中的<p>元素是其父元素的第一个子元素：
p:first-child i
{
　　background:yellow;
}

//选择列表中的第一个<li> 元素并设置其样式：
li:first-child
{
　background:yellow;
}

//设置每个<ul> 的首个子元素，并设置其样式：
ul>:first-child
{
　background:yellow;
}
　

　

“:focus”选择获得焦点的输入字段，并设置其样式。

input:focus
{
　background-color:yellow;
}

　

“:lang”选择带有以 “en” 开头的 lang 属性值的每个 < p> 元素，并设置其样式：

//CSS
p:lang(en)
{
　background:yellow;
}
//HTML
<p>我是小蛇</p>
<p lang="en">我是好人，哈哈</p>

http://www.runoob.com/cssref/css-selectors.html