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直接设置样式。