你对CSS权重真的足够了解吗?
前言
css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。
个人博客了解一下:obkoro1.com
权重规则总结:
- !important 优先级最高,但也会被权重高的important所覆盖
- 行内样式总会覆盖外部样式表的任何样式(除了!important)
- 单独使用一个选择器的时候,不能跨等级使css规则生效
- 如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
- 如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.
- 权重相同时,与元素距离近的选择器生效
css权重优先级用来干嘛?
在同一个元素使用不同的方式,声明了相同的一条或多条css规则,浏览器会通过权重来判断哪一种方式的声明,与这个元素最为相关,从而在该元素上应用这个声明方式声明的所有css规则。
权重的五个等级及其权重
- !important;
- 行内样式;
- ID选择器, 权重:100;
- class,属性选择器和伪类选择器,权重:10; 属性选择器指的是:根据元素的属性及属性值来选择元素,比如button的type属性等。 伪类选择器: :active :focus等选项.
- 标签选择器和伪元素选择器,权重:1; 伪元素选择器: :before :after
等级关系:
!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
权重规则:
1.不推荐使用!important
不推荐使用!important
,因为!important
根本没有结构与上下文可言,并且很多时候权重的问题,就是因为不知道在哪里定义了一个!important
而导致的。
覆盖important:
虽然我们应该尽量避免使用!important,但你应该知道如何覆盖important,加点权重就可以实现,codepen的demo
//!important 优先级最高,但也会被权重高的important所覆盖
<button id="a" class="a">aaa</button>
#a{
background: blue !important; /* id的important覆盖class的important*/
}
.a{
background: red !important;
}
2.行内样式总会覆盖外部样式表的任何样式,会被!important
覆盖
3.单独使用一个选择器的时候,不能跨等级使css规则生效
无论多少个class组成的选择器,都没有一个ID选择器权重高。类似的,无论多少个元素组成的选择器,都没有一个class选择器权重高、无论多少个ID组成的选择器,都没有行内样式权重高。
codepen的demo;
在demo中使用了11个class组成一个选择器,最后还是一个ID选择器,设置的样式生效。
可以想象在玄幻小说的那种等级制度,没有突破那个等级,就没有可比性。
所以权重是在双方处于同一等级的情况下,才开始对比。
4.如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
选择器可能会包含一个或者多个与权重相关的计算点,若经过权重值计算得到的权重值越大,则认为这个选择器的权重高。举一个简单的栗子:
.test #test{ } // id 100+class 10=110;
.test #test span{} // id 100+class 10+span 1=111;
.test #test .sonClass{} // id 100+class 10+class 10=120; //生效
5.如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.
demo
<div id="app">
<div class="test" id="test">
<span >啦啦啦</span>
</div>
</div>
#test span{
color:blue;
}
#app span{ // 生效 因为后面出现
color: red;
}
6.权重相同时,与元素距离近的选择器生效
比如不同的style表,head头部等,来看下面的栗子:
#content h1 { // css样式表中
padding: 5px;
}
<style type="text/css">
#content h1 { // html头部 因为html头部离元素更近一点,所以生效
padding: 10px;
}
</style>
建议:
- 避免使用
!important
; - 利用id增加选择器权重;
- 减少选择器的个数(避免层层嵌套);
结语
以上就是本文关于css权重的内容了,如有不对的地方欢迎指正!希望大家看完可以有所收获,喜欢的话,赶紧点波订阅关注/喜欢。
希望看完的朋友可以点个喜欢/关注,您的支持是对我最大的鼓励。
个人blog and 掘金个人主页,如需转载,请放上原文链接并署名。码字不易,感谢支持!本人写文章本着交流记录的心态,写的不好之处,不撕逼,但是欢迎指点。
如果喜欢本文的话,可以关注一下我的订阅号,漫漫技术路,期待未来共同学习成长。
以上2018.5.19
参考资料:
你应该知道的一些事情——CSS权重
深入CSS优先级
css优先级
- JavaWeb(三)servlet
- PL/SQL 编程(三 )程序包和包体,触发器,视图,索引
- 一次关于js事件出发机制反常的解决记录
- Java综合题目
- Ubuntu 16.04下为TITAN 1080 显卡安装驱动及Gpu版TensorFlow|深度学习
- 给新生成的节点(动态生成节点)绑定事件方法总结
- JavaWeb(四)JDBC操作Oracle
- JavaWeb(六)Listener监听器
- JSP引入 - UEditor 富文本编辑器
- JavaWeb(五)Filter过滤器
- JavaWeb(七)Cookie,EL表达式,标准标签库
- JavaWeb(八)JQuery
- 程序员如何提一个好问题
- JavaWeb(九)AJAX
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python爬虫实战:自动化登录网站,爬取商品数据
- 符合自己的工作难找?取招聘网站数据,让你找到心仪的工作
- 虽然现在有可以去码的软件了,可视频是如何自动跟踪打码的?
- Python爬取NBA虎扑球员数据
- 发现一个好看的手机壁纸网站,撸代码的手已经饥渴难耐了
- 手把手用python教你拿即时的卫星影像装饰你的桌面
- PyCharm2019亲测破解方式
- :: 是什么语法?
- 支付宝二面:Mybatis接口Mapper内的方法为啥不能重载吗?我直接懵逼了...
- Windows系统中使用Linux命令(可以批量下载Modis数据)
- Python制作桑基图(我承认我低估了这个教程)
- 几个好看的Seaborn图样~(虽然官方配色一般般,但我还是忍不住夸它)
- GDAL读取MAIAC的HDF文件(熟肉)
- Google Earth Engine(GEE)-谷歌地球引擎的大致Python入门
- 谷歌地球引擎(Google Earth Engine)之数据初探(栅格和矢量)