（8）伪类选择器和鼠标悬停动画效果
伪类的语法： ：+ 标签名（类名）
class-name:nth-child(number){
color: firebrick;
}
伪类选择器优先级：高于标签低于id等于class
1、伪类选择器是通过物理结构层级查找，一层一层查找
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*PS:如果这里写1和2，则所有的内容都会更改，因为伪类选择器是通过物理结构一层一层查找，而整个页面中从上而下，首先html就是整个页面的第一结构，head是第二结构，body是第三结构，所以如果是1和2则整个页面全部会生效*/
:nth-child(1){
color: firebrick;
}
</style>
</head>
<body>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
</body>
</html>
PS：每一个层次结构都可以生成很多层
2、一个父标签下有多个不同类型的子标签，伪类选择器如何查找
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*先将所有结构下的第3个标签找出来，在匹配选择器的类型li*/
li:nth-child(3){
color: firebrick;
}
</style>
</head>
<body>
<ul>
<p>p标签</p>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
</div>
</div>
</body>
</html>
3、伪类选择器偶数（奇数）匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*2n就是2的倍数，也就是匹配偶数位，如果是2n-1则就2的倍数-1，就是匹配奇数位*/
li:nth-child(2n){
color: firebrick;
}
</style>
</head>
<body>
<ul>
<p>p标签</p>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
</div>
</div>
</body>
</html>
4、鼠标悬浮动画伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*2n就是2的平方，也就是偶数，如果是2n-1则就是奇数位生效*/
li:nth-child(2n){
color: firebrick;
}
</style>
<style>
/*动画伪类选择器*/
/*transition就是动画效果过渡效果，如果需求是动画触发和动画结束，则要写在这里*/
/*transition有几个属性： 1、（1s 1s过渡效果展开的时间和延迟时间）延迟时间一般不会写，用户体验度不好 2、动画属性默认all 3、过渡曲线linear（线性）*/
/*linear可以修改，在页面右键检查，然后右边下面的styles里面，可以看到标签下的linear，然后点击后可以出现线性调节，调节后复制过来，把linear黏贴替换掉即可*/
.box{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*linear => cubic-bezier(0.05, 0.81, 0.42, -0.27)*/
transition: 1s 1s all linear;
}
/*hover是给区域添加鼠标悬停放大的动画效果*/
/*如果这里写 transition，则鼠标移走的时候会有一个突然结束的视觉，因为触发的时候有下面的参数，但是结束的时候没有参数，所以要写在最初的参数里面，这样结束的时候最初的参数依然存在*/
/*如果需求是动画触发，结束不需要动画，则写在这里即可*/
.box:hover{
/*transition:1s;*/
width: 400px;
height: 400px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<p>p标签</p>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<div class="box">
</div>
</body>
</html>
