css选择器
赵北辰 ## 基本选择器
id选择器（"#"），class选择器（"."），标签选择器（"div"），通配符选择器（“*”）；
**<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors">属性选择器（“a[title]”）</a>**
按照给定的属性，选择所有匹配的元素。
## 分组选择器
**<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Selector_list">并集选择器（","）</a>**
是将不同的选择器组合到一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
## 组合器
**后代选择器（“ ”）**
组合器选择前一个元素的后代节点。
**子元素选择器（">"）**
组合器选择前一个元素的直接子代的节点。
**<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator">一般兄弟组合器（"~"）</a>**
组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
**例子**：`p ~ span` 匹配同一父元素下，[`<p>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p) 元素后的所有 [`<span>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/span) 元素。
**<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator">紧邻兄弟组合器（"+"）</a>**
组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
**例子：** `h2 + p` 会匹配所有紧邻在 [`<h2>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements "Currently only available in English (US)") 元素后的 [`<p>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p) 元素。
## 伪类选择器（":"）
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
**链接伪类选择器**
```javascript
a:link // 选择所有未被访问过的链接
a:visited // 选择所有已被访问过的链接
a:hover // 选择鼠标指针位于其上的链接
a:active // 选择活动链接(鼠标按下未弹起的链接)
```
**focus伪类选择器**
焦点就是光标，一般情况下`<input>`类表单元素才能获取，因此这个选择器也主要针对表单元素来说。
```CSS
// 当input获取到光标的时候就改变背景色
input:focus {
background-color:red;
}
```
```HTML
<div>
<input type="text" />
<input type="text" />
</div>
```
**结构伪类选择器 E:nth-child(n)**
选择符 | 简介 |
| ---------------- | -------------- |
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个
**nth-child 和 nth-of-type 的区别**
nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第n个孩子，然后看看是否和E匹配。
nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配E，然后再根据E 找到第n个孩子。
我们看一个简单的例子
```HTML
<div>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
</div>
```
```CSS
p:nth-child(2) { color: red; }
```
结果：
<image src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/541a147fc5ca436eb75dfdf9e48c05dd~tplv-k3u1fbpfcp-watermark.image?" width="350px" height="150px">
```CSS
p:nth-of-type(2) { color: red; }
```
结果：
<image src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/541a147fc5ca436eb75dfdf9e48c05dd~tplv-k3u1fbpfcp-watermark.image?" width="350px" height="150px">
尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。
我们把上面的实例稍作修改，就可以看到这两个选择器之间的差异表现了，
```HTML
<div class="flex">
<div>我是搅局的div标签</div>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
</div>
```
```CSS
p:nth-child(2) { color: red; }
```
结果：
<image src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec278f7ef3d142e9b1251fe6b698fc66~tplv-k3u1fbpfcp-watermark.image?" width="350px" height="150px">
```CSS
p:nth-of-type(2) { color: red; }
```
结果：
<image src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/912c0769d1d14730afec8658b150c5b6~tplv-k3u1fbpfcp-watermark.image?" width="350px" height="150px">
这时候两个选择器所渲染的结果就不一样了。
`p:nth-child(2)`悲剧了，其渲染的结果不是第二个`p`标签文字变红，而是第一个`p`标签，也就是父标签的第二个子元素。
`p:nth-of-type(2)`的表现显得很坚挺，其把希望渲染的第二个`p`标签染红了。
对于`p:nth-child(2)`表示这个元素要是`p`标签，且是第二个子元素，是两个必须满足的条件。于是，就是第一个`p`标签颜色为红色（正好符合：p标签，第二个子元素）。如果在`div`标签后面再插入个`span`标签，如下：
```HTML
<div>
<div>我是搅局的div标签</div>
<span>我是搅局的span标签</span>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p>
</div>
```
那么`p:nth-child(2)`将不会选择任何元素。
而`p:nth-of-type(2)`表示父标签下的第二个`p`元素，显然，无论在`div`标签后面再插入个`span`标签，还是`h1`标签，都是第二个`p`标签中的文字变红。
## 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
新创建的这个元素，在文档树中是找不到的，所以我们称为**伪元素**。
选择符 | 简介 |
| -------- | ------------ |
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
- before 和 after 创建一个元素，但是属于行内元素。
例子：
```HTML
<div>
是
</div>
```
```CSS
div::after {
content: '小猪佩奇';
}
```
结果：
