美文网首页
css权重问题

css权重问题

作者: sdcV | 来源:发表于2017-07-24 21:04 被阅读64次
    在编写css的时,有时会遇到添加的样式无效,现对css权重问题做一个总结。
    • 优先级
      通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

    • 优先级计算
      元素, 伪元素: 1 – (0,0,0,1)
      类, 伪类, 属性: 1 – (0,0,1,0)
      ID: 1 – (0,1,0,0)
      内联样式: 1 – (1,0,0,0)

      可以理解为:每条样式的权重值就是该样式所包含的所有选择器相对应的权重值之和:
      元素,伪元素:+1 
      类,伪类,属性:+10 
      ID:+100 
      内联样式:+1000
      例如: p {}  //p为元素,总权重就是:1
            div p{} //p与div都是元素,总权重是:1=1=2
           .div p // .div是类,p是元素,总权重是:10+1=11
      
    • 有个例外!!!
      !important 允许开发人员强制应用某样式,例如:
      img { width: 150px !important;}

    相关文章

      网友评论

          本文标题:css权重问题

          本文链接:https://www.haomeiwen.com/subject/obhikxtx.html