CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html
一、基本的优先级规则
比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承
二、CSS权重规则
在《页面重构中的模块化设计》中提到,影响CSS样式权重,有两个重要因素:
A:样式的优先级跟样式定义的顺序有关
B:权值的大小跟选择器的类型和数量有关
一般来说,在同一个CSS文件中,如果有两个同名的样式,则后定义的会覆盖先定义的。选择器类型的优先级见(一)。
那么,CSS的权重是怎么算的呢?
一个selector的权重表示方式:0.0.0.0,按照计算规则给每位填充数字,对应位置相等,则比较下一位。
权重的计算规则如下:(为方便,用A.B.C.D代替各位置的值)
1、内嵌样式:A=1,B=C=D=0(即1.0.0.0)
2、ID样式:selector中带几个ID,第2位就加几个1 如#header{color:red},就是A=C=D=0,B=1(即0.1.0.0)
3、类,伪类,以及属性的个数就是第三位的值:
.a.b[type="text"]:hover{},选择器中有2个类,1个属性,1个伪类,所以它的第3位为4, A=B=D=0,C=4,(即0.0.4.0)
4、伪元素和标签元素的个数就是第四位的值
p:first-letter,有一个标签元素p和伪元素first-letter,值为2,A=B=C=0,D=2(即0.0.0.2)
5、通配符和继承得到的CSS属性对权重没有影响
三、几个示例
针对以上,看以下几个示例
1、.a .b .c {color:red;} //0.0.3.0 说明:只有三个类
2、*
{…} //0.0.0.0 说明:通配符对权重没有影响
3、.a .b a {color:green} //0.0.2.1 说明:两个类和一个标签
4、#hid {color:black;} //0.1.0.0 说明:只有一个ID
CSS:权重和层叠规则决定了其优先级的更多相关文章
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- CSS:重量和级联规则,确定其优先级
资源:http://www.ido321.com/1063.html 首先,给大家看一篇关于CSS优先级的演示样例:http://www.ido321.com/76.html 一.主要的优先级规则 比 ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- CSS的“层叠”规则的总结
当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...
- css层叠规则,优先级算法
前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...
- 盒模型 | CSS权重 | CSS层叠
span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...
- css层叠规则(层叠样式表)
CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...
- css知多少(3)——样式来源与层叠规则
上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...
随机推荐
- java对象与json对象间的相互转换
工程中所需的jar包,因为在网上不太好找,所以我将它放到我的网盘里了,如有需要随便下载. 点击下载 1.简单的解析json字符串 首先将json字符串转换为json对象,然后再解析json对象,过程如 ...
- POJ 1308&&HDU 1272 并查集判断图
HDU 1272 I - 小希的迷宫 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...
- linux rsync +inotify 实现 实时同步
前言: rsync可以实现触发式的文件同步,但是通过crontab守护进程方式进行触发,同步的数据和实际数据会有差异,而inotify可以监控文件系统的各种变化,当文件有任何变动时,就触发rs ...
- centos rm -rf 恢复删除的文件
Linux有时候执行了 rm -rf 等操作误删了文件绝对是一件可怕的事情,好在有一些解决的办法可以临时救急.这时我们就要用到一款叫做extundelete的工具了. 目录[-] 依赖 安装 查找要恢 ...
- Controller之间传递数据:属性传值
在项目中,Controller之间传递数据非常之多,这里简单介绍一下属性传值.例如有FirstController 和 SecondController,数据从First传递到Second中,我们如何 ...
- 【云计算】实战-五个Docker监控工具的对比
[实战]五个Docker监控工具的对比 阅读目录 Docker Stats命令 CAdvisor Scout Data Dog Sensu Monitoring Framework 总结 这篇文章作者 ...
- Android studio 程序升级和sdk manager 升级方法
在中国使用android有点郁闷,经常被屏蔽.常遇到2个升级问题,现在总结如下: 1.android studio升级时提示 Connection failed. Please check your ...
- iOS 和 Android 中的后台运行问题
后台机制的不同,算是iOS 和 Android的一大区别了,最近发布的iOS7又对后台处理做了一定的更改,找时间总结一下编码上的区别,先做个记录. 先看看iOS的把,首先需要仔细阅读一下Apple的官 ...
- XP下使用IIS访问asp出现无权查看网页问题的解决办法
这是用户权限问题,因为你用的磁盘是NTFS格式. 解决方法: 一.添加用户(“Everyone”或者“IUSR_你的机器名”,如IUSR_HONG,即“Internet 来宾用户”) 二.修改用户权限 ...
- JavaScript设计模式 - 单例模式
单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 一.实现一个标准的单例模式,用一个变量来标志当前是否已经为某个类创建过对象, 如果是,则在下一次获取该对象实例时,直接返回之前创建的对 ...