结构伪类选择器（存疑）
结构伪类选择器（存疑，有一定思路，但不确定是否正确）
声明：
该部分开头参考自CSDN作者原创文章，仅供个人学习，特此声明
原文链接：https://blog.csdn.net/ixygj197875/article/details/79038041==
看表理解结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:last-child | 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) |
| E:nth-child(n) | 选择父元素的第n个子元素，n从1开始计算 |
| E:nth-last-child(n) | 选择父元素的倒数第n个子元素，n从1开始计算 |
| E:first-of-type | 选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1) |
| E:last-of-type | 选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1) |
| E:nth-of-type(n) | 与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素 |
| E:nth-last-of-type | 与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素 |
| E:only-child | 选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1) |
| E:only-of-type | 选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1) |
| E:empty | 选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点 |
| E:root | 选择文档的根元素，对于HTML文档，根元素永远HTML |
结构伪类选择器很容易遭到误解，需要特别强调。如，p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。
需要注意的是，结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。
分析一个问题
首先，我学习了一种定位方法：父标签+空格+子标签+：+first（last）-child 例如下边代码
/*ul的第一个子元素*/
ul li:first-child{
color : red;
}
该代码意为定位ul标签的子标签li的第一个子元素
很简单对吧？
但我在运用过程中发现了一个问题,观察分析以下代码
<head>
<style>
body p:last-child{
color : wheat;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</body>
按照上边学习到的方法分析：这样写应该会定位到body标签的子标签p的最后一个子元素p3，将其颜色改为wheat，对吧？但观察生成页面后发现结果并非如此，如下图
但当我用同样的方法，定位p1时，该方法又成功定位了
<head>
<style>
body p:first-child{
color : wheat;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</body>
如下图所示，p1字体颜色被改为了wheat
对于这个问题，我个人的想法是这样的(存疑)
这种定位是一种自上而下的定位，系统会从上往下找你想定位的子标签元素，如果在寻找过程中恰好被一个另一种类型的子标签元素打断了，系统就不会继续往下找了，相当于定位失败了
例如我们上边遇到的问题，因为我们要定位body标签的子标签p的最后一个子元素，所以系统要从body开始往下找，当遍历到p1这个子元素后，下一个子元素偏偏是一个h1子标签的子元素，相当于定位被打断了，定位失败
为什么后边定位p1又成功了呢？因为系统自body开始向下遍历，恰好中间没有被任何其他类型子标签的元素打断，直接就定位到p1了，所以定位成功了
鉴于以上这种定位方法局限性太大，我们来学习其他定位方法
1、p:nth-child(x)
意为定义到p标签的父标签的第x个子标签元素
这种定位是不区分标签类型的
eg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(3){
color : blue;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</body>
</html>
以上代码意为定位到p标签的父标签（body）的第3个子标签元素（p2）。如下图所示
简而言之就是在父标签body的所有类型子标签中遍历定位
2、p:nth-of-type(x)
意为定义到p标签的父标签的p子标签的第x个子元素
这种定位是区分标签类型的
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-of-type(3){
color : yellow;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</body>
</html>
以上代码意为定位到p标签的父标签（body）的p标签的第3个子标签元素（p3）。即便是中间穿插了一个h1子标签。如下图所示
3、整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不使用class和id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
color : red;
}
/*ul的最后一个子元素*/
ul li:last-child{
color : pink;
}
/*定位p1
不知道为什么在p标签和它的父标签body中间加入h1标签以后这个方法就失效了
试着将h1标签放到所有p标签以后，这个方法就可以了；将h1标签插入到p与p之间时这个方法又失效了
难道是这种方法不能被不同标签所打断？
*/
body p:first-child{
color : wheat;
}
/*定位p2方法一：
定位到p2元素的父标签，选择父标签的第三个子元素(p2)
*/
p:nth-child(3){
color : blue;
}
/*定位p2方法三：
定位到父标签，选择p的父标签p类型子标签的第二个元素(p2)
*/
p:nth-of-type(3){
color : yellow;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
