伪类选择器
标签（空格分隔）： 伪类选择器
常用的几种伪类选择器。
没有访问的超链接a标签样式：
a:link {
color: blue;
}
访问过的超链接a标签样式：
a:visited {
color: gray;
}
鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
鼠标点击瞬间的样式：
a:active {
color: green;
}
nput输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
hover选择器在网页中非常好用，如果是我鼠标悬浮的是父盒子，想让父盒子的子盒子显示出来，这种效果其实也可以用hover选择器。但是我们要将hover选择器和后代选择器结合起来一起用,下面是个例子，大家copy看效果，瞬间就明白,鼠标悬浮aaa上 会显示一张图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
position: relative;
}
ul li img{
display: none;
position: absolute;
top: -16px;
left: 36px;
}
ul li:hover img{
display: block;
}
</style>
</head>
<body>
<ul>
<li>
aaaa
<img class="original-img" src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" >
</li>
</ul>
</body>
</html>
例子二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!--伪类选择器一般用在标签上-->
<style type="text/css">
<!--没有被访问你的a标签的样式-->
div ul li.item1 a:link{
color:gray;
}
/*访问过后的a的样式*/
.box ul li.item2 a:visited{
color:yellow
}
/*鼠标悬停的时候样式*/
.box ul li.item3 a:hover{
color:green;
}
/*鼠标点主的时候a标签的*/
.box ul li.item4 a:active{
color:yellowgreen;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
<a href="#">张三</a>
</li>
<li class="item2">
<a href="#">李四</a>
</li>
<li class="item3">
<a href="#">王二</a>
</li>
<li class="item4">
<a href="#">王二3</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!--伪类选择器一般用在标签上-->
<style type="text/css">
<!--没有被访问你的a标签的样式-->
div ul li.item1 a:link{
color:gray;
}
/*访问过后的a的样式*/
.box ul li.item2 a:visited{
color:yellow
}
/*鼠标悬停的时候样式*/
.box ul li.item3 a:hover{
color:green;
}
/*鼠标点主的时候a标签的*/
.box ul li.item4 a:active{
color:yellowgreen;
}
/*选中第一个元素*/
div ul li :first-child{
font-size: 20px;
color: red;
}
div ul li :last-child{
font-size: 20px;
color: yellow;
}
/*0，1，2，正常的从0开始,0表示没有选中*/
div ul li :nth-child(3){
font-size: 20px;
color: red;
}
/*表示选中所有的*/
div ul li :nth-child(n){
font-size: 20px;
color: red;
}
div ul li :nth-child(2n){
font-size: 20px;
color: red;
}
div ul li :nth-child(2n-1){
font-size: 20px;
color: red;
}
/*隔几个换色*/
div ul li :nth-child(4n-1){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">张三</a>
</li>
<li class="item2">
2
<a href="#">李四</a>
</li>
<li class="item3">
3
<a href="#">王二</a>
</li>
<li class="item4">
4
<a href="#">王二3</a>
</li>
<li class="item5">
5
<a href="#">王二3</a>
</li>
<li class="item6">
6
<a href="#">王二3</a>
</li>
<li class="item7">
7
<a href="#">王二3</a>
</li>
</ul>
</div>
</body>
</html>
