选择器补充
伪类选择器：当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。
状态类：
| 写法 | 介绍 | 举例 |
|---|---|---|
| :hover | 鼠标悬停 | a:hover{color:pink;} |
| :link | 未被访问的链接（特指a标签） | a:link{color:red}; |
| :visited | 被访问过的链接（特指a标签） | a:visited{color:blue;} |
| :active | 被点击按下状态（a标签摁下去没抬起来） | a:active{color:green;} |
:hover :active 不仅仅能用在a标签上。
:hover最为常用最为重要。
结构类
| 写法 | 介绍 | 举例 |
|---|---|---|
| E:nth-child(n) | E元素父级的第n个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素） | p:nth-child(2){color:red;} |
| E:nth-of-type(n) | E元素父级的第n个E元素，无视其他元素 | p:nth-of-type(2){color:red;} |
| E:first-child | E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素） | p:first-child{color:red;} |
| E:last-child | E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素） | p:last-child{color:red;} |
| nth-child(2n) | 选中所有的偶数序列 | |
| nth-child(2n+1) | 选中所有的技术序列 |
伪元素选择器
伪类选择器相当于在某种情况下添加了一个类名，伪元素选择器 创建一个假元素
| 写法 | 介绍 | 举例 |
|---|---|---|
| E::before | 相当于在E元素的最前面添加一个额外的子元素 | #wrap::before{content:“Hello World!”} |
| E::after | 相当于在E元素的最后面添加一个额外的子元素 | #wrap::after{content:“Hello World!”} |
必须拥有 content 样式，上述两个伪元素才会生效。
创建的子元素是一个行内元素。
组合形式：
.box: hover p {
}
这种选择的是 box 里面子类的 p 标签