首先,给大家看一篇关于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:权重和层叠规则决定了其优先级的更多相关文章

  1. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  2. CSS:重量和级联规则,确定其优先级

    资源:http://www.ido321.com/1063.html 首先,给大家看一篇关于CSS优先级的演示样例:http://www.ido321.com/76.html 一.主要的优先级规则 比 ...

  3. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  4. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  5. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...

  6. css层叠规则,优先级算法

    前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...

  7. 盒模型 | CSS权重 | CSS层叠

    span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...

  8. css层叠规则(层叠样式表)

    CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...

  9. css知多少(3)——样式来源与层叠规则

    上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...

随机推荐

  1. java对象与json对象间的相互转换

    工程中所需的jar包,因为在网上不太好找,所以我将它放到我的网盘里了,如有需要随便下载. 点击下载 1.简单的解析json字符串 首先将json字符串转换为json对象,然后再解析json对象,过程如 ...

  2. POJ 1308&&HDU 1272 并查集判断图

      HDU 1272 I - 小希的迷宫 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64 ...

  3. linux rsync +inotify 实现 实时同步

    前言:     rsync可以实现触发式的文件同步,但是通过crontab守护进程方式进行触发,同步的数据和实际数据会有差异,而inotify可以监控文件系统的各种变化,当文件有任何变动时,就触发rs ...

  4. centos rm -rf 恢复删除的文件

    Linux有时候执行了 rm -rf 等操作误删了文件绝对是一件可怕的事情,好在有一些解决的办法可以临时救急.这时我们就要用到一款叫做extundelete的工具了. 目录[-] 依赖 安装 查找要恢 ...

  5. Controller之间传递数据:属性传值

    在项目中,Controller之间传递数据非常之多,这里简单介绍一下属性传值.例如有FirstController 和 SecondController,数据从First传递到Second中,我们如何 ...

  6. 【云计算】实战-五个Docker监控工具的对比

    [实战]五个Docker监控工具的对比 阅读目录 Docker Stats命令 CAdvisor Scout Data Dog Sensu Monitoring Framework 总结 这篇文章作者 ...

  7. Android studio 程序升级和sdk manager 升级方法

    在中国使用android有点郁闷,经常被屏蔽.常遇到2个升级问题,现在总结如下:  1.android studio升级时提示 Connection failed. Please check your ...

  8. iOS 和 Android 中的后台运行问题

    后台机制的不同,算是iOS 和 Android的一大区别了,最近发布的iOS7又对后台处理做了一定的更改,找时间总结一下编码上的区别,先做个记录. 先看看iOS的把,首先需要仔细阅读一下Apple的官 ...

  9. XP下使用IIS访问asp出现无权查看网页问题的解决办法

    这是用户权限问题,因为你用的磁盘是NTFS格式. 解决方法: 一.添加用户(“Everyone”或者“IUSR_你的机器名”,如IUSR_HONG,即“Internet 来宾用户”) 二.修改用户权限 ...

  10. JavaScript设计模式 - 单例模式

    单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 一.实现一个标准的单例模式,用一个变量来标志当前是否已经为某个类创建过对象, 如果是,则在下一次获取该对象实例时,直接返回之前创建的对 ...