伪类可以看做是一种特殊的类选择符,它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
1. 语法
伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：
selector:pseudo-class {property: value}
（选择符:伪类 {属性: 值}）
伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。
类选择符及其他选择符也同样可以和伪类混用：
selector.class:pseudo-class {property: value}
（选择符.类:伪类 {属性: 值}）
2. 锚的伪类
我们最常用的是4种a（锚）元素的伪类：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链上）.
如：链接未访问时的颜色是红色无下划线，访问后是绿色无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
注意：有时链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
3. 伪类和类选择符
将伪类和类组合起来用，可以在同一个页面中做几组不同的链接效果.
例子:我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上：
这是第一组链接这是第二组链接4. 其他伪类
此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。
a.例子:在段落标记里定义文本首字尺寸为默认大小的3倍：
……
这是一个段落，这个段落的首字被放大了。
b.例子：段落的第一行为红色，第二、三行为默认颜色
……
阅读(938) | 评论(0) | 转发(0) |
