CSS的伪类选择器
伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式。
比如: 访问访问过的超链接,比如普通的超链接,比如获取焦点的文本框等,下面的几种伪类选择器
:link
定义: 修饰普通的链接(没有访问过的链接)
语法: 元素 :link{}
:visited
定义: 修饰访问过的链接(浏览器通过访问历史记录,判断是否访问过该链接,由于涉及到用户的信息,我们只能设置其颜色属性
语法: 元素:visited
:hover
定义: 修饰鼠标移入到链接上面是这个状态
语法: 元素 :hover{}
:active
定义: 修饰鼠标点击到链接没有松手的这个状态
语法: 元素 :active{}
另外hover和active也可以对其他元素进行操作
IE6中不支持点击超链接之外的元素
:focus
定义: 文本获取焦点后,设定的属性发生变化
语法: 元素:focus{}
::selection
定义: 选择文本中的几个字或者段落的时候,设置其颜色的变化
语法: 元素::selection{}
注意: 这个伪类在火狐浏览器不支持,
火狐浏览器语法: ::-moz-selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
a:link{
color: blue;
}
a:visited{
color: red;
}
a:hover{
color: yellow;
}
a:active{
color: purple;
}
input:focus{
background-color: yellow;
font-size: 50px;
}
p::selection{
color: orange;
}
</style>
</head>
<body>
<a class = "ha" href="http://www.baidu.com">访问过的链接</a>
<br/><br/>
<a class = "h" href="http://www.baudu123.com">没有访问过的链接</a>
<input type = "text"/>
<p>我是一只猫</p>
</body>
</html>