首先,给大家看一篇关于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. 从零开始写一个武侠冒险游戏-6-用GPU提升性能(1)

    从零开始写一个武侠冒险游戏-6-用GPU提升性能(1) ----把帧动画的实现放在GPU上 作者:FreeBlues 修订记录 2016.06.19 初稿完成. 2016.08.05 增加对 XCod ...

  2. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  3. 转MYSQL学习(四) 查询

    MySQL中select的基本语法形式: select 属性列表 from 表名和视图列表 [where 条件表达式] [group by 属性名[having 条件表达式]] [order by 属 ...

  4. 猪八戒吃西瓜(wmelon)-排序-查找

    问题 A: 猪八戒吃西瓜(wmelon) 时间限制: 1 Sec  内存限制: 64 MB提交: 30  解决: 14[提交][状态][讨论版] 题目描述 有一天,贪吃的猪八戒来到了一个大果园,果园里 ...

  5. PHP--TP框架----把查询到的数据,显示在模型(模板)里面

    MainController.class.php <?php namespace Home\Controller; use Think\Controller; class MainControl ...

  6. iOS PickerView动态加载数据

    将新的数据放入临时数组 NSMutableArray *tmp=[[NSMutableArray alloc] init]; [tmp addObject:[[NSString alloc] init ...

  7. HTML标签自定义属性(转)

    HTML标签可以自定义属性 HTML标签可以自定义属性,但是我们要考虑其在IE.Firefox以及chrome下的兼容性问题.例如: <div id="newTest" my ...

  8. js之事件冒泡和事件捕获介绍

    链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...

  9. Linux下可以替代windows的软件汇总:(不断完善中)

    http://www.ubuntukylin.com/ukylin/forum.php?mod=viewthread&tid=9530 原则:不求全面,只求实用.主要针对桌面级应用.网购:  ...

  10. Sublime Text : 创建工程

    Sublime Text 可以很方便地管理多个工程.使用Sublime Text的Projects,可以将不同根目录的文件组织起来成为一个工程,而不用将所有的文件都放到一个根目录下面. 1. 创建工程 ...