<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
伪类专门用来表示元素的一种的特殊的状态
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式试，就能使用伪类
*/
/*
为没访问过的链接设置一个颜色为绿色
:link
- 表示普通的链接（没访问过的链接）
*/
a:link {
color: yellowgreen;
}
/*
为访问过的链接设置一个颜色为红色
:visited
- 表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用于的隐私问题，所以visited伪类只能设置字体的颜色
font-size: 50px;
background-color: yellow;
都不会生效
*/
a:visited {
color: red;
}
/*
:hover伪类表示鼠标移入的状态
*/
a:hover {
color: blue;
}
/*
:active表示的超链接被点击的状态
*/
a:active {
color: black;
}
/*
:hover和:active也可以为其他元素设置
IE6中不支持对超链接以为的元素设置:hover和:active
*/
/* p:hover {
background-color: yellow;
}
p:active {
background-color: orange;
} */
/*
文本框获取焦点以后，修改背景颜色为黄色
*/
input:focus {
background-color: yellow;
}
/*
为p标签中选中的内容设置样式
可以使用 ::selection伪类
注意：这个伪类在火狐中需要采集另一种方式编写::-moz-selection
*/
/*
兼容大部分浏览器的
*/
p::selection {
background-color: orange;
}
/*
兼容火狐的
*/
p::-moz-selection {
background-color: gray;
}
</style>
</head>
<body>
<a href="http://you.163.com">严选主站</a>
<a href="http://www.baidu.com">百度地址</a>
<p>我是一个段落</p>
<input type="text">
</body>
</html>
网友评论