CSS优先级

两个角度比较:

从级别上看,通常我们可以将CSS的优先级由高到低分为六组:

  1. 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6支持这个属性,但要注意bug,见上一篇博客。(权重为10000)
  2. 第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。(权重为1000)
  3. 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。(权重为100)
  4. 第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}(权重为10)
  5. 第五级由一个或多个 类型选择器定义。如 div{margin:6px;}  覆盖  *{margin:10px;} 。(权重为1)
  6. 最低一级的选择器是为一个通配选择器,用*{margin:10px;}这样的类型来定义。(权重为0)

另外,当一个CSS选择器拥有更多的高级别属性时,它的优先级就会比较高。如 #i100 *.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{} ,这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个,当然前者优先级会比较高。


当比较多个相同级别的CSS选择器优先级时,它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级:

  1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
  2. 第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
  3. 第三级的优先属性由<link/>标签所引入的样式表定义。
  4. 第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
  5. 第五级优先的样式有用户设定。
  6. 最低级的优先权由浏览器默认。

理解了这些CSS优先级问题后,也就不必苦恼于样式定于中的此类问题了。


CSS选择器权重http://www.w3cplus.com/node/498: 


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值