css声明的优先级

    样式表的组成:
	样式表由规则组成
	规则由选择器+声明组成
	声明是由css属性和属性值组成的键值对
	浏览器渲染样式表的顺序
	浏览器读取编译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样式的来源大致有三种
  创作人员(开发者)
  读者(用户)
  用户代理(浏览器)
 权重:
  读者的重要声明(用户,就是直接在浏览器写的样式。ie:internet选项-辅助功能-用户样式表-使用样式表)
  创作人员的重要声明
  创作人员的正常声明
  读者的正常声明
  用户代理的声明(浏览器)
层叠
  1.找出所有的相关规则,这些规则都包含一个选择器
  2.计算声明的优先级
  先按来源排序
  再按选择器的特殊性排序
  最终按顺序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值