1、伪类选择器
什么是伪类选择器?
- 伪类选择器是用来给超级链接的不同状态来设置样式。
超级链接的不同状态
- 正常访问 超级链接没有被访问 :link
- 访问过后状态 超级链接已经被访问 :visited
- 鼠标放上状态 鼠标放在超级链接上面,但是并没有将鼠标的左键按下去 :hover
- 激活状态 鼠标左键已经按下去,但是并没有将鼠标的左键弹出 :active
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.133.com">133</a>
<a href="http://www.134.com">134</a>
</body>
</html>
打开后是显示这个超级链接的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/*使用伪类选择器来给超级链接的不同状态来设置样式*/
/*正常状态*/
a:link{
color: #f00; ------->图1
}
/*访问过后状态*/
a:visited{
color: #000; ------->图2
}
/*鼠标放上状态*/
a:hover{
color: gold; ------->图3
}
/*激活状态*/
a:active{
color: #0f0; ------->图4
}
</style>
</head>
<body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.133.com">133</a>
<a href="http://www.134.com">134</a>
</body>
</html>
-
图1
-
图2
-
图3
-
图4
注意:
- 超级链接的不同状态其实是有序的,也就是说伪类选择器设置其实是有顺序。如果不按照伪类选择器的顺序,那么样式就会失效。
- 顺序:要遵循“爱恨准则”要先有爱,才有恨。“Love Hate”
2、超级链接的美化
我们通常会去掉超级链接的下划线,然后同时会给超级链接设置一个颜色。
一般情况下:
正常状态与访问过后的状态的样式设置为一样
当鼠标放上的时候给其设置另一个颜色 激活状态一般不会设置 因为激活状态的时间太短
举例:
a:link, a:visited(去掉超级链接的下划线;设置一个颜色;)
a:hover(设置另外一个颜色;增加一张下划线;)
/*对超级链接进行美化*/
/*正常状态与访问过后的状态*/
a:link,a:visited{
text-decoration: none;color: #444; /*文本设置颜色*/
}
/*鼠标放上状态*/
a:hover{
color: #f00; /*设置颜色*/
text-decoration: underline; /*对文本加下划线*/
}