css优先级详解

##1 css权重

参考：https://zhuanlan.zhihu.com/p/89642030

面经原答案中提到声明来源，不知道这里的用户定义是什么意思

首先按照来源排序，从高到低依次为：
用户自定义的带有 !important 标记的声明；
开发者编写的带有 !important 标记的声明；
开发者编写的常规声明；
用户自定义的常规声明；
浏览器默认声明；

1.1 权重顺序

！important > 行内样式 > id选择器 > 类选择器、伪类选择器、属性选择器 > 标签选择器、伪元素选择器

伪类选择器就是：

div:first-child{
    
}
a:link{
    
}

属性选择器：

div[type='text']{
    
}

伪元素选择器：

div:before{
    content:'123'
}

1.2 优先级计算

权重值计算都是按级别分开的，不带进位的，就算你搞100个标签选择器也没有一个伪类选择器优先级高

* {} /* 权重值 0-0-0-0-0 */
div {} /* 权重值 0-0-0-0-1 */
div h1+h2 {} /* 权重值 0-0-0-0-3 */
div, ... div {} /* 权重值 0-0-0-0-n */
#demo a:hover {} /* 权重值 0-0-1-1-1 */

第一个位置表示 ！important的权重

1.3 一些注意事项

• 伪类选择器中的 否定伪类（：not()）本身不具备权重，但是其内部选择器会影响权重
• 通配符选择器和结合符对优先级没有影响

通配符：* 就是全局选择器

结合符有四个

div   p{
  空格：  div下的所有p标签（儿子孙子全算）
}

div > p{
    > ：div下的所有儿子
}
div + p{
    +:div的之后的兄弟节点，与div相邻且拥有同一个父元素
}
div ~ p{
    ~：div之后的所有兄弟p标签
}

• 以@import导入进来的css文件一律视为插在css文件的最前面。后导入的覆盖先导入的
• 如果优先级计算相同，后声明覆盖先声明的