CSS 伪类用于向某些选择器添加特殊的效果,语法结构如下:
选择器:伪类 {
declaration1;
declaration2;
…
}
1. :link 向未被访问的链接添加样式。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
a:link{
background: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
链接尚未被访问,样式如a:link{}中所设定
2. :visited 向未被访问的链接添加样式。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
a:visited{
background: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
如图为访问后的样式。
3. :active当鼠标悬浮在元素上方时,向元素添加样式。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
a:active{
background: blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
如图为点击时的样式
4. :hover 当鼠标悬浮在元素上方时,向元素添加样式。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
a:hover{
background: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
如图为光标置于上面时的样式。