伪类
a:link{属性:值;}
与a{属性:值;}
或者a:-webkit-any-link一样作用：
1.设置a标签的默认样式
2.推荐直接使用a标签设置样式 a{属性:值;}
a:visited{属性:值;}作用:
设置a标签被访问过的样式
◆该选择器会让浏览器有缓存的问题
◆该选择器只能设置与颜色相关的属性
a:hover{属性:值；}作用:
设置鼠标悬停在标签上的样式，不只是a标签可以，其他标签也可以。
a:active{属性:值;}作用：
鼠标单击不动时的样式
input:focus{属性:值;}作用：
当input标签获取光标焦点时的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a:link{
color: red;
/* 去掉下划线 */
text-decoration: none;
}
a:visited {
color: blue;
font-size: 40px;
}
a:hover {
color: pink;
font-size: 30px;
/* 设置下划线 */
text-decoration: underline;
}
a:active {
color: orange;
}
/* div {
width: 300px;
height: 300px;
background-color: red;
}
.one:hover {
width: 200px;
height: 200px;
background-color: green;
} */
input[type="text"] {
background-color: red;
}
input[type="text"]:focus {
background-color: green;
}
</style>
</head>
<body>
<a href="#">文字</a>
<div class="one"></div>
<input type="text">
</body>
</html>目标伪类
:target{属性:值;}注意:
1.目标伪类要和锚链接配合使用
2.只有当被锚链接指向该标签的时候才会执行目标伪类中的css代码
3.也有缓存问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
height: 3000px;
}
.one:target {
background-color: red;
}
</style>
</head>
<body>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div id="test" class="one">努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<a href="#test">知识</a>
</body>
</html>