css选择器优先级

important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符（*）

1. important声明 1,0,0,0
2. ID选择器 0,1,0,0
3. 类选择器 0,0,1,0
4. 伪类选择器 0,0,1,0
5. 属性选择器 0,0,1,0
6. 标签选择器 0,0,0,1
7. 伪元素选择器 0,0,0,1
8. 通配符选择器 0,0,0,0

有人说外部样式<内部样式,其实不然，其实外部样式=内部样式，谁在前面定义谁就被覆盖

class = 属性 = 伪类：例如.className的优先级和[class='className']和:hover的优先级是一样的，甚至.className的优先级和[id='idName']和:hover的优先级也是一样

空格和>的优先级是一样的，例如body b和body>b是一样的优先级

~和+的优先级是一样的，例如body~b和body+b是一样的优先级

伪元素的优先级和标签选择器的优先级一样，但是我们往往会遇到一些问题，例如：

::selection{
    color: red;
}
div{
    color:black!important;
}

被选中的文字还是红色的，不会被黑色样式覆盖，其原因是这里的black!important是作用在了::selection的父元素而不是直接作用在::selection上，

而我们调用伪元素的时候必须要写上伪元素不能像其他元素一样只写它的class或者id或者[attr='~~~'],所以要判断关于伪元素的优先级，都是看它前面的css选择器的优先级