CSS之优先级
css的优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""------------1000;
2 统计选择符中的ID属性个数。 #id --------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p ---------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突,则比较优先权。
4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
CSS之优先级的更多相关文章
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- CSS样式优先级
关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- 转载css层级优先级。
解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...
- CSS的优先级规则
CSS的优先级规则有两类 1.位置群组规则 最高优先级为元素内嵌的style样式,如<div style=” “></div> 次高优先级为html头部中的<style& ...
- 关于Css选择器优先级
今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...
- css的优先级以及!important的使用
CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤).起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目 ...
- 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG
一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
随机推荐
- Java中堆内存和栈内存的区别
Java把内存分成两种,一种叫做栈内存,一种叫做堆内存. 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空 ...
- 【UOJ244】【UER #7】短路
题解: 感觉贪心水平有所提高.. 首先比较显然的事情是我们可以枚举最深进行到哪一层 我们会发现,当且仅当该层是最小值才会使用决策, 并且是从该层的左上,走到右下 另外中间步骤就是(好难描述啊)一个单调 ...
- [转]Linux下is not in the sudoers file解决方法
来源: http://jingyan.baidu.com/article/2a1383284bb3e8074a134f2d.html 当我们使用sudo命令切换用户的时候可能会遇到提示以下错误:xxx ...
- Flink--connect
用来将两个dataStream组装成一个ConnectedStreams 而且这个connectedStream的组成结构就是保留原有的dataStream的结构体:这样我们就可以把不同的数据组装成同 ...
- yii的ActionForm组件
//文本框:textInput(); //密码框:passwordInput(); //单选框:radio(),radioList(); //复选框:checkbox(),checkboxList() ...
- HDU4185 Oil Skimming 二分图匹配 匈牙利算法
原文链接http://www.cnblogs.com/zhouzhendong/p/8231146.html 题目传送门 - HDU4185 题意概括 每次恰好覆盖相邻的两个#,不能重复,求最大覆盖次 ...
- Petya and Array CodeForces - 1042D (树状数组)
D. Petya and Array time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Codeforces 920F - SUM and REPLACE 【线段树】
<题目链接> 题目大意: 给你一个序列,有两个操作,一个是求区间 l - r 的和,另一个是对区间l-r的元素修改值,x=d(x),d(x)为x的因子个数. 解题分析: 因为可能有多次修改 ...
- 解决Windows 系统下Chrome中有多个音频界面时 无法静音单个Tab界面的问题
Open the browser and type this address into the URL bar: chrome://flags In the Search flags box at t ...
- photoshop实现倾斜图片的修正
第一天学习Photoshop,了解到了Photoshop对图片的处理,下面是实现一个倾斜图片修正的两种方法: 举例图片: 第一种方法:1.利用吸管中的标尺工具量倾斜度数: 2.利用旋转图像,旋转对应的 ...