CSS 优先级判断

在面试中被问到这个问题 来记录下  发现自己之前之所以会忘记还是缺少理解的记忆

参考 CSS权威指南

一个CSS选择器的特殊性值表述为4个部分  0 0 0 0

• 对于选择器中给定的各个ID的属性值  加 0 1 0 0
• 对于选择器中给定的各个类属性值，属性选择或者伪类  加 0 0 1 0
• 对于选择器中给定的各个元素和伪元素 加 0 0 0 1
• 结合符和通配选择器对特殊性没有贡献
• 内联声明的特殊性最高 1 0 0 0

我们可以使用！important来定义重要声明  重要声明一定会胜出非重要声明  重要声明的冲突在重要声明内部解决

        h1 {
            background: red !important;
        }
        h1 {
            background: green !important;
        }//h1 会显示为绿色

继承机制

　　基于继承的机制，我们设定的样式不仅能应用到指定的元素上，还能应用到它的后代元素 但是继承没有特殊性  相对于通配符*的0特殊性 这就容易出现问题

        * {
            background: green;
        }
        h1 {
            background: red;
        }

上面演示了通配符选择器出现的短路继承的现象