官方资料
鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/
学习正文
:link 选择器：https://man.ilovefishc.com/pageCSS3/dotlink.html
:visited 选择器：https://man.ilovefishc.com/pageCSS3/dotvisited.html
:hover 选择器：https://man.ilovefishc.com/pageCSS3/dothover.html
:active 选择器：https://man.ilovefishc.com/pageCSS3/dotActive.html
:focus 选择器：https://man.ilovefishc.com/pageCSS3/dotfocus.html
:link 选择器：定制链接未被访问时的样式。
:visited 选择器：定制链接被访问过的样式。
:hover 选择器：定制鼠标悬停在连接上方时候的样式。
:active 选择器：定制鼠标按下链接那一刻时候的样式。
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 为 a 元素定制4个状态的样式 */
/* 链接未被访问的时候 */
a:link {
color: pink;
}
/* 链接被访问过的时候 */
a:visited {
color: red;
}
/* 鼠标悬停在链接上方时 */
a:hover {
color: black;
}
/* 鼠标按下链接的那一刻 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>
hover 、active 同样可以用于那些其他的元素：
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: red;
color: white;
padding: 25px;
text-align: center;
}
/* 悬浮样式 */
a:hover {
color: pink;
}
/* 点击 div 时改变样式 */
div:active {
background-color: green;
}
</style>
</head>
<body>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim hic temporibus velit ipsa atque, minus quam quasi eos. Accusantium velit blanditiis dicta odio. Accusamus ea minus, iure facilis odio sed.</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti ex tempora non vitae necessitatibus? Architecto voluptates perspiciatis aut ipsam omnis quae provident vel iure unde commodi exercitationem, accusamus cumque nobis?</p>
<a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>
:focus 选择器，选取当获得鼠标焦点时的元素：
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
input#boy:focus {
background-color: cyan;
}
input#girl:focus {
background-color: pink;
}
</style>
</head>
<body>
<form>
<label>他的名字：</label>
<input type="text" name="name" id="boy">
<br><br>
<label>她的名字：</label>
<input type="text" name="name" id="girl">
</form>
</body>
</html>
image.png
