css声明的优先级

选择器的特殊性
　　选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如0,0,0,0,0
　　一个选择器的具体特殊性如下确定
　　1、对于选择器给定的ID属性值，加0,1,0,0
　　2、对于选择器中给定的各个类属性，属性选择，或伪类，加0,0,1,0
　　3、对于选择器中给定的各个元素和伪元素，加0,0,0,1
　　4、通配符的选择器的特殊性为0,0,0,0
　　5、结合符对选择器特殊性没有一点贡献
　　6、内联声明的特殊性都是1,0,0,0
　　7、继承没有特殊性　

　　总结：
　　内联样式，优先级1000
　　id选择器，优先级100
　　类和伪类，优先级10
　　元素选择器，优先级1
　　通配符，优先级0
　　继承的样式，没有优先级

　　当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，

　　但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式

　　并集的选择器的优先级是单独计算

　　特殊性1,0,0,0大于所有的以0开头的特殊性（不进位）
　　选择器的特殊性最终都会授予给其对应的声明
　　如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

　　注意：id选择器和属性选择器
　　div[id="test"](0,0,1,1) and #test(0,1,0,0)
　　重要声明
　　有时某个声明比较重要，超过了所有的其他声明，css2-1就称之为重要声明
　　并允许在这些声明的结束分号之前插入!important来标志
　　必须要准确的放置!important 否则声明无效
　　!important总是要放在声明的最后，即分号的前面

　　标志位!important的声明并没有特殊性值，不过要与非重要声明分开考虑
　　实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决（然后再去判断选择器的优先级）
　　非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
　　如果一个重要声明与非重要声明冲突，胜出的总是重要声明

　　继承
　　继承没有特殊性，甚至0特殊性都没有
　　0特殊性要比无特殊性来的强
　　来源
　　css样式的来源大致有三种
　　创作人员
　　读者
　　用户代理

　　权重：
　　读者的重要声明（用户，就是直接在浏览器写的样式）
　　创作人员的重要声明
　　创作人员的正常声明
　　读者的正常声明
　　用户代理的声明（浏览器）

　　层叠
　　1.找出所有的相关规则，这些规则都包含一个选择器
　　2.计算声明的优先级
　　先按来源排序
　　再按选择器的特殊性排序
　　最终按排序

转载于:https://www.cnblogs.com/caicaihong/p/9144377.html