CSS伪类和伪元素

伪类：

作用是对所选元素做操作时加一些样式，或者对所选元素的子元素加样式。

语法：

标签:伪类动作{属性:值}

selector : pseudo-class {property: value}

标签.标签的类:伪类动作{属性:值}

selector.class : pseudo-class {property: value}

伪类可以有的动作：

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

例子：

对a标签进行不同操作获得不同样式：

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

伪元素：

与伪类作用相似，对所选的元素或该元素附近元素添加特殊样式。

注意：CSS3为了区别伪元素和伪类，将伪元素改写为两个冒号selector::pseudo-element

语法：

标签:需要做的动作{属性:值}

selector:pseudo-element {property:value;}

标签.需要做的动作:伪类动作{属性:值}

selector.class:pseudo-element {property:value;}

伪元素可以做的动作：

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

例子：

在h1标签后附上logo.gif图片：

h1:after
{
content:url(logo.gif);
}