CSS伪类选择器

CSS伪类选择器

在html的标记中，所有的锚(a)元素看起来都一样，实际上是有两种基本的锚类型：已访问的和未访问的。这些类型称为伪类，使用这些伪类的选择器成为伪类选择器。

链接伪类

CSS2.1中定义了两个只应用于超链接的伪类：

伪类名	描述
:link	指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚
:visited	指示作为已访问地址超链接的所有锚

如果我们需要所有的未访问页面锚都是紫色，而所有已访问页面的锚是银色，则可以使用CSS这样表示：

a:link {color:purple;}
a:visited {color:silver;}

动态伪类

CSS2.1中定义了3个动态伪类，它们可以根据用户行为改版文档的外观。

伪类名	描述
:focus	指示当前拥有输入的焦点元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素
:hover	指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接
:active	指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，：active将指示这个超链接

结合伪类

CSS2.1中，可以在同一个选择器中结合使用伪类。例如，鼠标指针停留在未访问的链接时，可以让这些链接变为红色，而鼠标指针停留在已访问的链接上时，链接会变成紫红色。

a:link:hover {color:gray}
a:visited:hover {color:maroon;}

伪类的结合顺序不重要，a:hover:link和 a:link:hover会得到一样的效果，但是要注意，不要把两个互斥的伪类结合在一起，比如，一个链接不可能同时是已经访问的，又是没有访问的，所以a:link:visited没有任何意义，这种选择器一般会被忽略。

伪元素选择器

伪元素是能够在文档种插入的假象元素，CSS2.1中定义了4个伪元素，设置首字母样式，设置第一行样式，设置之前和之后的元素的样式。

设置首字母样式

第一个伪元素用于设置一个块级元素首字母的样式，而且仅对于该首字母设置样式：

p:first-letter{color :red;}

这个规则会将每一段的第一个字母变成红色。

设置第一行样式

和first-letter类似，first-letter可以用来影响元素中的第一个文本行，例如：让文本第一段的第一行变成紫色：

p:first-line{color:purple;}

设置之前和之后元素的样式

如果你想在每个h2元素之前加一堆银色中括号：

h2:before {conten:"}}";color:silver;}

CSS2.1中允许插入生成的内容，然后使用伪元素：before和：after直接设置样式。