CSS 优先级判断

在面试中被问到这个问题 来记录下  发现本身以前之因此会忘记仍是缺乏理解的记忆   面试

参考 CSS权威指南spa

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

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

咱们能够使用!important来定义重要声明  重要声明必定会胜出非重要声明  重要声明的冲突在重要声明内部解决code

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

继承机制blog

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

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

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

相关文章
相关标签/搜索