伪类是专门用来表示元素的一种特殊的状态
比如:访问过的超链接,普通的超链接,获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时,就可以使用这些伪类
-
:link
表示普通的链接(没访问过的链接) -
:visited
表示访问过的链接
浏览器通过历史记录来判断一个链接是否被访问过
由于涉及用户隐私问题,所以visited只能设置字体颜色 -
:hover伪类表示鼠标移入的状态
-
:active伪类表示鼠标点击状态
除了a标签,其他标签也可以使用active和hover IE6不支持除超链接以外的伪类 -
为p标签中选中的文字设置样式
可以使用::selection伪类
注意这个伪类在火狐中需要采用另一种编写方式::-moz-selection
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 伪类专门用来表示元素的一种特殊的状态
* 比如:访问过的超链接,普通的超链接,获取焦点的文本框
* 当我们需要为处在这些特殊状态的元素设置样式时,就可以使用这些伪类
*/
/*
* 为没访问过的链接设置一个颜色为绿色
* :link
* 表示普通的链接(没访问过的链接)
*/
a:link{
color: yellow;
}
/*
* 为访问过的链接设置一个颜色为红色
* :visited
* 表示访问过的链接
*
* 浏览器通过历史记录来判断一个链接是否被访问过
* 由于涉及用户隐私问题,所以visited只能设置字体颜色
*/
a:visited{
color: red;
}
/*
* :hover伪类表示鼠标移入的状态
*/
a:hover{
color: blue;
}
/*
* :active伪类表示鼠标点击状态
*/
a:active{
color: black;
}
/*
* 除了a标签,其他标签也可以使用active和hover
* IE6不支持除超链接以外的伪类
*/
p:active{
background-color: pink;
}
p:hover{
color: orange;
}
/*
* 文本框获取焦点以后修改背景色为黄色
*/
input:focus{
background-color: yellow;
}
/*
* 为p标签中选中的文字设置样式
* 可以使用::selection伪类
* 注意这个伪类在火狐中需要采用另一种编写方式::-moz-selection
*/
/*
* 兼容大部分浏览器
*/
#p1::selection{
background-color: orange;
}
/*
* 兼容火狐浏览器
*/
#p1::-moz-selection{
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
</br>
<a href="http://www.baidu123.com" >未访问过的链接</a>
<br />
<p>我是一个p标签</p>
<!--
使用input可以创建一个文本输入框
-->
<input type="text" />
<p id="p1">我是p1标签</p>
</body>
</html>
2923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
