css的优先级以及!important的使用
CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤)。起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目都是小规模的前端,也或与自己书写CSS的习惯有关(自己基本上就是逐层书写CSS,尽量把代码写得干净整洁),CSS优先级并没有成为某次项目的绊脚石。直到某次项目,因为用到的CSS库与自己页面的设计稿有冲突,才再次重视起CSS的优先级。
以下就将有关CSS的优先级的知识进行归纳整理:
①继承的不如指定的;②id>class>标签选择符;③越具体的样式越强大;④标签 id>id;标签 class>class。
CSS优先级权重的计算方法:CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优 先级,规则如下:
①元素标签中定义的样式,加1000;
②每个ID选择符,加0100;
③每个Class选择符、每个属性选择符、每个伪类,加0010;
④每个元素选择符或伪元素选择符,加0001;
将这四个数字分别累加,就得到每个CSS定义的优先级的值,然后从左到右逐位比较大小,数字大的CSS样式的优先级高。
举例:
假设对应example.html在example.css文件中定义如下样式:
1. h1{color:red;} /*一个元素选择符,结果为0001*/
2. body h1{color:green;} /*两个元素选择符,结果是0002*/
3. h2.grape{color:purple;} /*一个元素选择符、一个Class选择符,结果是0011*/
4. li#answer{color:navy;} /*一个元素选择符,一个ID选择符,结果是0101*/
而同时在example.html中有:
<style>
h1{color:blue;}
</style> /*元素标签中定义,一个元素选择符,结果是1001*/
1001是有关h1样式中计算最大的,所以h1元素的颜色应该是蓝色的。
有关CSS优先级的计算就介绍到此。
接下来介绍!important:
!important声明的样式优先级最高。
如何想更透彻掌握!important,如下博客链接可能会对你有所帮助:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html
css的优先级以及!important的使用的更多相关文章
- 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG
一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...
- 通过!important设置css样式优先级
CSS写在不同的地方有不同的优先级,一般 .css文件中的定义 < 元素style中的属性,但是如果使用!important,则会变得不一样,使用!important的css定义是拥有最高的优先 ...
- css的优先级 和 权重问题 以及 !important 优先级
css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- css优先级之important
css优先级之important
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- CSS样式优先级
关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
随机推荐
- android输入框显示在软键盘上边
有时候在界面需要输入的时候,如果输入框在界面的下方,软键盘弹出的时候会遮挡输入框界面,对用户的体验不是很好. 在网上找的别人的解决方案 首先: 清单文件里面配置:android:windowSoftI ...
- Quartz 第二课 Jobs and Triggers(官方文档翻译)
The Quartz API IScheduler—与scheduler交互的主要的接口 IJob—这个接口主要定义scheduler执行内容 IJobDetail—用于定义Jobs实例 ITrigg ...
- day 0.
/* 嗯 就要结束了. OI生涯 2015.12-2016.11. 认识了很多人. 然后我这个学渣跟你们混在一起 感觉自卑至极啊. 好了 先不说这些伤心的话. Gryz小伙伴儿们NOIP RP++吧. ...
- (poj 3177) Redundant Paths
题目链接 :http://poj.org/problem?id=3177 Description In order to <= F <= ,) grazing fields (which ...
- excel 导入功能
一:示例代码 //InputStream fis = new FileInputStream(tomcaturl+this.awardTask.getFileRoute());//可以通过上述方式获得 ...
- WinForm条码打印
在这篇博客中,我曾经介绍了如何实现条形码的生成(生成jpg格式的图片),这篇博客借用上面生成的条码,能够实现条形码的打印功能. 出于批量打印操作的方便以及操作体验考虑,我选择了WinForm.功能很简 ...
- android 软件开机自启动
安卓的很多功能实现方式都是“Don't call me, I'll call you back!”,开机启动就是其中之一 步骤: 1.首先建立一个BroadcastReceiver, 2.在他的onR ...
- QQ空间g_tk加密算法PHP版
QQ空间g_tk加密算法PHP版 //G_tk计算 function getGTK($skey){ $hash = 5381; for($i=0;$i<strlen($skey);++$i){ ...
- 国产CPU研究单位及现状
1.国产CPU主要研制单位 (1)高性能通用CPU(“大CPU”,主要应用于高性能计算及服务器等) 主要研发单位:中国科学院计算所.北大众志.国防科技大学.上海高性能集成电路设计中心 (2)安全适用计 ...
- 【CSDN人物访谈】蒋守壮分享他的技术成长之路以及对Hive技术的解读与思考
结缘大数据技术 CSDN:请简单地介绍一下自己. 蒋守壮:首先非常感谢CSDN能够给我这次被专访的机会,可以让我重新审视自己的职业发展历程,也希望能够帮助一些同行的朋友们.目前就职万达网络科技集团有限 ...