基本选择器
id选择器（"#"），class选择器（"."），标签选择器（"div"），通配符选择器（“*”）；
属性选择器（“a[title]”） 按照给定的属性，选择所有匹配的元素。
分组选择器
并集选择器（","） 是将不同的选择器组合到一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
组合器
后代选择器（“ ”） 组合器选择前一个元素的后代节点。
子元素选择器（">"） 组合器选择前一个元素的直接子代的节点。
一般兄弟组合器（"~"）
组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
例子：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。
紧邻兄弟组合器（"+"）
组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
例子： h2 + p 会匹配所有紧邻在 <h2> 元素后的 <p> 元素。
伪类选择器（":"）
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
链接伪类选择器
a:link // 选择所有未被访问过的链接
a:visited // 选择所有已被访问过的链接
a:hover // 选择鼠标指针位于其上的链接
a:active // 选择活动链接(鼠标按下未弹起的链接)
focus伪类选择器
焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。
// 当input获取到光标的时候就改变背景色
input:focus {
background-color:red;
}
<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个孩子。
我们看一个简单的例子
<div>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
</div>
p:nth-child(2) { color: red; }
结果：
p:nth-of-type(2) { color: red; }
结果：
尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。
我们把上面的实例稍作修改，就可以看到这两个选择器之间的差异表现了，
<div class="flex">
<div>我是搅局的div标签</div>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
</div>
p:nth-child(2) { color: red; }
结果：
p:nth-of-type(2) { color: red; }
结果：
这时候两个选择器所渲染的结果就不一样了。
p:nth-child(2)悲剧了，其渲染的结果不是第二个p标签文字变红，而是第一个p标签，也就是父标签的第二个子元素。
p:nth-of-type(2)的表现显得很坚挺，其把希望渲染的第二个p标签染红了。
对于p:nth-child(2)表示这个元素要是p标签，且是第二个子元素，是两个必须满足的条件。于是，就是第一个p标签颜色为红色（正好符合：p标签，第二个子元素）。如果在div标签后面再插入个span标签，如下：
<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 创建一个元素，但是属于行内元素。
例子：
<div>
是
</div>
div::after {
content: '小猪佩奇';
}
结果：
:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或 ("select") 元素中的option HTML 元素 ("option")。
:default CSS pseudo-class 表示一组相关元素中的默认表单元素。
该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。
:disabled CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。
CSS 伪类 :enabled 表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。元素也有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点。
:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。
:has() CSS 伪类代表一个元素，其给定的选择器参数（相对于该元素的 :scope）至少匹配一个元素。
in-range CSS 伪类 代表一个 <input> 元素，其当前值处于属性min 和max 限定的范围之内。
:invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素。
:not CSS 伪类表示不匹配选择器列表的元素。 由于它阻止选择特定项目，因此它被称为否定伪类。
:only-child CSS伪类表示没有任何兄弟的元素。这与:first-child:last-childor相同:nth-child(1):nth-last-child(1)，但特异性较低。
CSS伪类表示当前值超出和属性指定的范围限制的元素。 :out-of-range <input>minmax
CSS伪类表示当前正在显示占位符文本的任何或元素。 :placeholder-shown <input><textarea>
CSS伪类表示用户不可编辑的元素（例如或）。 :read-only input``textarea
CSS伪类表示用户可编辑的元素（例如或）。 :read-write input``textarea
CSS伪类匹配代表文档的树的根元素。在 HTML 中，表示元素，与选择器相同，只是它的特异性更高。 :root :root<html>html
