详细解读 CSS 选择器优先级

CSS 优先级注意事项

1、优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

2、而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

3、当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

4、可以这样来看：选择器描述越具体越稀缺优先级越高，后面声明的比前面声明的选择器优先级高(同类型的选择器)。

选择器类型

对优先级没有影响的（可以理解为优先级非常低的）

1. 通配选择符 ( *)
2. 关系选择符

• + 相邻兄弟选择器
• > 子选择器
• ~ 通用兄弟选择器
• ' ' 后代选择器

:not() 否定伪类

对优先级有影响的（下面的排序优先级依次变大）

1. 元素选择器( h1 p div)
2. 伪元素 ( ::before ::after)
3. 类选择器 ( .class1) 和 属性选择器 ( a[title] img[title*=hello]) 两者优先级相同，声明在后面的会覆盖前面的
4. 伪类选择器 ( :hover)
5. ID 选择器 ( #demo)

其他影响最终结果的

1、内联样式 <a ></a>

2、