伪类选择器
伪类选择器,就是基于元素当前所处的抓奶来选取元素,由于状态通常是动态变化的,当元素处于一个特定状态时,他可能得到一个伪类的样式;当状态改变是,他又会失去这个样式。由此可知,它是基于文档之外的抽象,所以称作伪类。
伪类选择器是css中已经定义好的选择器,不能有用户随便起名,只能按css规定的标准格式进行使用。其语法为:
选择器:伪类名{属性:值;}
选择器 | 功能描述 | 版本 |
---|---|---|
E:link | 选择未被访问过的链接 | 1 |
E:visited | 选择已被访问过的链接 | 1 |
E:active | 选择被激活(即鼠标已经按下还未释放)的E元素 | 1 |
E:hover | 选择鼠标悬停其上的E元素 | 1 |
E:focus | 选择获得焦点的E元素 | 1 |
在HTML中,超链接是指所有带有href属性的a元素。可以使用链接伪类来区分未访问的链接和已访问的链接:
a:link { color : blue;}
a:visited { color : purpel;}
当然,对于链接伪类,不仅可以应用颜色,还可以应用更多样式。如。对于已访问的链接,除了紫色外,还可以有一条删除线。
尽管:link
和:visted
非常有用,但他们是静态的,第一是现实之后,他们不会再改变元素的样式。并且他们只用于锚元素,因此被称作链接伪类或锚伪类。
而:hover、:focus、:active
则不同,他们可以根据用户行为动态改变文档的外观,故被称为动态味蕾,或用户行为伪类。
最初,动态伪类总是用来设置超链接的样式,不过现在他们可以应用到任何元素。如在表格上使用:hover
伪类,表单的文本输入框是使用:focus
伪类,表单的提交按钮上使用:active
伪类等。如:
tr:hover {
background:#cld5eb;
}
input:focus {
outline: 1px solid #cld5eb;
}
另外,还可以把链接伪类结合在一起使用,来创造更丰富的样式。如,定义已被访问链接的悬停效果:
a: visited : hover {
color: #8888;
哪种书写顺序并不重要,a:visited:hover
和a:hover:visited
将会得到相同的效果。但是不要把互斥的类结合在一起,如,一个链接不能同时是未访问和已访问状态,因此a:link:visited
没有任何意义。