伪类选择器
链接伪类
css2.1定义了两个只应用于超链接的伪类
:link 指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚。注意,有些浏览器可能会不 正确地将:link解释为指向任何超链接,包括已访问和未访问的超链接
:visited 指示作为已访问地址超链接的所有锚
css2.1定义了三个动态伪类,它们可以根据用户行为改变文档的外观。这些动态伪类以前总用来设置超链接的样式,不过它们还有很多其他用途
:focus 指示当前拥有输入焦点的元素,也就是说可以接受键盘输入或者能以某种方式激活的元素
:hover 指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上
:active 指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接
类似于:link和:visited,这些伪类最常用于超链接的上下文中,很多web页面都有类似的样式
a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}
a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
a:active 必须位于 a:hover 之后,这样才能生效!
链接无效会导致visited设置无效
伪类的顺序很重要,通常的建议为link-visited-focus-hover-active
body *:hover {background: yellow;}
从body元素继承的所有元素在鼠标指针停留时会显示一个黄色背景
选择第一个子元素
还可以使用另一个静态伪类:first-child来选择元素的第一个子元素。
p:first-child {}
选择某元素第一个子元素的所有p元素
根据语言选择
在有些情况下,可能想根据元素的语言来选择,可以使用:lang()伪类。从对应的模式来讲,:lang()伪类就像是|=属性选择器。例如要把所有法语元素变成斜体
*:lang(fr) {font-style:italic;}
伪类选择器和属性选择器之间的主要差别在于语言信息可以从很多来源得到,而且其中一些可能在元素之外。css2.1指出:
在html中,语言由lang属性和meta元素的组合来确定,还可能包括协议提供的信息,如http首部。xml使用一个xml:lang属性,另外可能还有其他文档语言特定的方法来确定语言。
因此伪类比属性选择器稍微健壮一些,在需要语言特定的样式时,大多数情况下伪类都是更好地选择。
结合伪类
在css2.1中,可以在同一个选择器中结合使用伪类
a:link:hover {}
a:visited:hover {}
不要把互斥的伪类结合在一起使用