结构伪类选择器
作用：
根据元素的结构关系查找元素
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第N个E元素(第一个元素N值为1) |
例如：查找第一个li标签，将背景改为绿色
<style>
li:first-child {
background-color: green;
}
</style>
:nth-child(公式）
作用：可以根据元素的结构关系查找多个元素。
| 功能 | 公式 |
|---|---|
| 偶数标签 | 2n |
| 奇数标签 | 2n+1;2n-1 |
| 找到5的倍数的标签 | 5n |
| 找到第五个以后的标签 | n+5 |
| 找到第5个以前的标签 | -n+5 |
例如：将偶数标签的背景的改为绿色
<style>
li:nth-child(2n) {
background-color: green;
}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li>999</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
写法：
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after | 在E元素里面最后面添加一个伪元素 |
注意：
- 必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
例如：
div::before {
content: "JAVA";
}
div::after {
content: "饭";
}
<div>炒</div>
最终结果为JAVA炒饭
同时也可以添加其他的样式
div::before {
content: "JAVA";
width: 40px;
height: 40px;
background-color: aqua;
display: block;
}
div::after {
content: "饭";
width: 40px;
height: 40px;
background-color: bisque;
display: block;
}
div {
width: 300px;
height: 300px;
background-color: brown;
}
<div>炒</div>效果为：
