结构：
ul li:last-child
拆解：
ul li:标签位置，就是说要定位ul标签中的li标签
” ：“：表示伪类，伪类选择器要写的符号。
last-child：定位ul标签中最后一个li元素
first-child：定位ul标签中第一个li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<!--避免使用class id选择器-->
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
/*
ul li:标签
first-child：第一个
*/
background:#02ff00;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
/*
ul li:标签
last-child：最后一个
*/
background:#02ff00;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/*只选中p1,定位到父元素，选择当前的第一个元素
选中当前元素的父级元素，选中父级元素的第一个，但是这个p标签要在第一个元素，如果你要选中的p标签前面有其他标签元素，那就会阻碍生效，解决方式是我们把括号中的1，改成从父类第一行数，到你要定位的元素是第几行，那就把1，改成对应的数就行了
*/
p:nth-child(1){/*根据父类去定位*/
background:#02ff00;
}
p:nth-of-type(2){/*根据类型去定位,当前代码的父类元素都是body标签，表示选择父类中第二个类型为p标签的元素*/
background:#020f00;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p1</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
a:hover{/*把鼠标放到a标签文字上，改变文字颜色
hover:动作
*/
background:yellow;
}
</style>
</head>
<body>
<p>p1</p>
<a href="">44554</a>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p1</p>
</body>
</html>
