css权重问题

在编写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;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,713评论 1 92
  • 1标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS盒子模型:由四个属性组成的外边距(margi...
    秦小婕阅读 4,977评论 0 1
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,581评论 0 30
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,578评论 0 40
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,979评论 0 6

友情链接更多精彩内容