CSS——结构伪类选择器
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
结构伪类选择器的测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{
background:red;
}
ul li:last-child{
background:pink;
}
/*body p:first-child{
background:blue;
}*/
/*伪类选择器1.
选择p的第一个元素p1：
步骤：
1.先选择p1的父类（body），所有的标签
2.再选择里面的第一个标签p1
这个是按父类（body）的顺序选择
*/
p:nth-child(1){
background:green;
}
/*为类选择器2.
步骤：直接选择父类元素里第二个p类型的p标签
这个是按照类型选择的
*/
p:nth-of-type(2){
background:black;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>p4</p>
<p>p5</p>
</body>
</html>
效果图
关于更多伪类选择器的学习请参考css选择器参考手册