CSS学习随笔二之选择器优先级

4、选择器的优先级

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。 到底应用哪个样式，此时就需要看优先级了。

一、简单理解优先级：

行内样式>ID选择器>类选择器>元素选择器>通配选择器

二、详细理解优先级：

1、按权重计算：（a,b,c）

a：ID选择器个数

b：类选择器、伪类选择器、属性选择器个数

c：元素选择器、伪元素选择器个数

例如：

选择器	权重
ul>li	(0,0,2)
div ul>li p a span	(0,0,6)
#atguigu .slogan	(1,1,0)
#atguigu .slogan a	(1,1,1)
#atguigu .slogan a:hover	(1,2,1)

神奇宝贝介绍：vscode鼠标放到样式名称上面，可以显示权重，如下图：

2、比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例

(1,0,0) > (0,2,2) (1,1,0) > (1,0,3) (1,1,3) > (1,1,2)

3、特殊规则：

1、行内样式权重大于所有选择器。

2、 !important 的权重，大于行内样式，大于所有选择器，权重最高！ （慎用，一般用在需要紧急修复生产bug，但是开发测试无法定位的问题的时候）

<style>
    .test{
        color : green !important;
    }

</style>