首先,给大家看一篇关于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. 详解HttpURLConnection

    请求响应流程 设置连接参数的方法 setAllowUserInteraction setDoInput setDoOutput setIfModifiedSince setUseCaches setD ...

  2. HTML快速入门3

    四.表格 (Table) 1. 表格的基本形式 表由 <table> 开始, </table> 结束,表的内容由 <tr>,<th> 和 <td& ...

  3. BZOJ 1455

    STL的基本用法 (居然能空间卡过去= =!!!) #include <cstdio> #include <ext/pb_ds/priority_queue.hpp> #inc ...

  4. 脚本重定向输出【错误、正确】——分析service脚本中用到的语法

    <1> >&2 即 1>&2 也就是把结果输出到和标准错误一样:之前如果有定义标准错误重定向到某log文件,那么标准输出也重定向到这个log文件如:ls 2&g ...

  5. Netbeans 配置英文和默认utf-8编码

    JAVA SDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads 解决办法: 进入netbeans 6.5\etc ,其中ne ...

  6. 【Redis】Redis分布式集群几点说道

    Redis数据量日益增大,使用的公司越来越多,不仅用于做缓存,同时趋向于存储这一块,这样必促使集群的发展,各个公司也在收集适合自己的集群方案,目前行业用的比较多的是下面几种集群架构,大部分都是采用分片 ...

  7. .Net Attribute特性

    1.什么是Atrribute 首先,我们肯定Attribute是一个类,下面是msdn文档对它的描述: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标 ...

  8. Two Sum I & II

    Two Sum I Given an array of integers, find two numbers such that they add up to a specific target nu ...

  9. Mysql数据库中设置root密码的命令及方法

    我们都知道通常PHP连接 Mysql都是通过root用户名和密码连接,默认情况下在Mysql安装时root初始密码为空,在安装使用PHP开源系统时,都需要填写连接Mysql数据库的用户名和密码,此时当 ...

  10. python时间转换

    #设a为字符串 import time a = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组 time.strptime(a,'%Y-% ...