style优先级

不同级别

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

      总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

优先级计算:选择器的特殊性值表述为4个部分,用0,0,0,0表示。

    • 行间样式的特殊性是1,0,0,0
    • ID选择器的特殊性值,加0,1,0,0。
    • 类选择器、属性选择器或伪类,加0,0,1,0。
    • 元素和伪元素,加0,0,0,1。
    • 通配选择器*对特殊性没有贡献,即0,0,0,0。
    • 最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。
      选择器组合后的特殊性值按照加法计算
      div a{color: green;} /*特殊性值:0,0,0,2*/
      .demo a{color: black;} /*特殊性值:0,0,1,1*/
      下方的权重大于上方

       

posted @ 2019-11-09 17:43  哒哒阿  阅读(364)  评论(0编辑  收藏  举报