css选择器有哪些？如何判断优先级？

四类选择器

css选择器可以分为四大类：

1. 基本选择器
2. 分组选择器
3. 组合选择器
4. 伪选择器

最常用的就是基本选择器，一般来说有五种基本选择器：

• 通用选择器： * ，匹配所有元素
• 元素选择器：使用元素名称进行元素匹配，比如 a、p 
• 类选择器：通过类名匹配原色，比如 .class 
• 属性选择器：通过元素的属性来匹配元素，如 a[href] 
•  id 选择器：通过元素 id 来匹配元素，如 #app 。值得注意的是，id选择器不是匹配一个元素而是多个（当然我们不希望页面有相同id的元素）。

这五种基本选择器是另外几种选择器使用的基础。

为了扩展选择器的适用范围，比如我希望同事选择 p 元素和类为 demo 的元素，这时就需要把基本选择器组合起来，我们使用 ， 把选择器分开，就得到了选择器的组合，这就是分组选择器：

p, .demo {
    color: red;
}

同时，有时候为了选择器更精准，也就是缩写选择器的范围，我们就需要使用组合选择器，组合选择器主要有四种（两后代两兄弟）：

• 后代选择器：使用空格进行组合，比如 #app div 
• 直接子元素组合器：使用 > 进行组合，比如 div > p 
• 兄弟选择器：使用 ～ 进行组合，比如 p ～ p 能匹配到 p 元素之后的兄弟元素。（注意，只能匹配到之后的兄弟元素）
• 紧邻兄弟选择器：有时候为了选择紧邻的兄弟元素，我们使用 + 来进行组合，如果 p + a 

此外，还有些元素比较特殊，比如被访问过的 a 标签，悬浮状态下的 div 等等，这些都是某些场景下的特殊状态，为了捕获到这些具有特殊状态的标签，我们需要使用伪类选择器，这些伪类描述了不同状态的标签，比如 :hover 表示鼠标悬浮状态下的标签， a:visited 表示被访问过的 a 标签，  div:first-child 表示 div 的第一个子元素。

除了伪类，还有一种元素称之为伪元素，伪元素是真实存在的元素，但又不能被html表达出来，比如 p 元素的首字母，首行，这种元素称不上元素，因为只是元素的一部分，但又是真实存在的，因此称为伪元素，目前html提供了五种伪元素选择器：

•  ::brefore ：插入元素之前的内容
•  ::after ：插入元素之后的内容
•  ::first-letter ：元素的首字母
•  ::first-line ：元素的首行
•  ::selection ：元素被选中的部分

而伪类是记录特殊状态的元素，目前有几十种，这里不再一一列举。

选择器优先级

由于我们编写css时可能会有多个选择器匹配到同一个元素，而又具有不同的样式，这时候就需要判断哪个选择器优先级更高，就选哪个选择器指定的样式。

我们知道css叫层叠样式表，也就是样式是层叠覆盖的，如果两个选择器的权重一致，则后面的选择器会覆盖前面的选择器。此外，继承而来的样式相当于样式的初始化，优先级是最低的。

选择器的权重参考值如下所示，权重越高，优先级越高：

• 元素选择器：元素选择器、伪元素选择器，权重为 1
• 类选择器：类选择器、伪类选择器、属性选择器，权重为 10
• id选择器：权重为100
• 内联样式：权重为1000
•  !important 标记权重值最高

总结来说就是： !important > 内联样式 > id选择器 > 类/属性选择器 > 元素选择器。而通配符选择器是没有权重的。