原则一: 继承不如指定 
原则二: #id > .class > 标签选择符 
原则三:越具体越强大 
原则四:标签#id >#id ; 标签.class > .class

CSS优先级权重计算法

CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!

根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下: 
* 元素标签中定义的样式(Style属性),加1,0,0,0 
* 每个ID选择符(如 #id),加0,1,0,0 
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0 
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1 
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值, 
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

例子: 
css文件或

1. h1 {color: red;}
/* 一个元素选择符,结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符,结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */
元素的style属性中如下定义:
h1 {color: blue;}
/* 元素标签中定义,一个元素选择符,结果是1,0,0,1*/

如此以来,h1元素的颜色是蓝色。 
注意: 
1、!important声明的样式优先级最高,如果冲突再进行计算。 
2、如果优先级相同,则选择最后出现的样式。 
3、继承得到的样式的优先级最低。

关于CSS的优先级,CSS优先级计算,多个class引用的更多相关文章

  1. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  2. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  3. 举例详解CSS中的的优先级

    计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...

  4. CSS 从入门到放弃系列:CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  5. CSS介绍&选择器&选择器优先级

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...

  6. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  7. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  8. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  9. CSS的继承与优先级

    CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都 ...

  10. CSS样式定义的优先级顺序总结

    CSS样式定义的优先级顺序总结 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 & ...

随机推荐

  1. java 编解码

    decoder:解码--> 将文件内容转换为字符对象: encoder:编码-->将字符对象转换为字节或者字节数组: ASCII  (American Standard for Infor ...

  2. 操作符offset

    操作符offset在汇编语言中是由编译器处理的符号,它的功能是取得标号的偏移地址. assume cs:codesg codesg segment start: mov ax, offset star ...

  3. 成为JAVA架构师必看书籍推荐

    原创文章 “学习的最好途径就是看书“,这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两点好处: 1.能出版出来的书一定是经过反复的思考.雕琢和审核的,因此从专业性的角度来说,一本好书 ...

  4. rsync同步工具的配置与使用

    一.什么是rsync?rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具. rsync官网 http://rsync.samba.org/ 二.rsync的工 ...

  5. Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。

    yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...

  6. css布局之头尾固定中间高度自适应

    被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一 ...

  7. C# 通过api函数GetPrivateProfileString读取ini文件,取不到值

    通过api函数GetPrivateProfileString读取ini文件,取不到值,测试了好长时间,都不行 确认程序,ini文件都没有错误的情况,最后发现是ini文件编码的原因. 将ini文件的编码 ...

  8. Pandas选择数据

    1.简单筛选 >>> dates = pd.date_range(', periods=6) >>> df = pd.DataFrame(np.arange(24) ...

  9. Eclipse.Error.gen already exists but is not a source folder.

    在Eclipse ADT来开发Android App时会遇到以下问题:"myproject/gen already exists but is not a source folder. Co ...

  10. 抽屉效果几大github第三方库

    首先感谢董铂然博客园,鄙人收藏学习之用,如有朋友看到.有需要请直接前往董铂然博客园本文, 请点击查看原文 在公司项目新版本方案选择中,对主导航中要使用的抽屉效果进行了调研.主要原因是旧的项目中所用的库 ...