css的优先级

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

1 内联样式表的权值最高               style=""------------1000;

2 统计选择符中的ID属性个数。       #id --------------100

3 统计选择符中的CLASS属性个数。 .class -------------10

4 统计选择符中的HTML标签名个数。 p ---------------1

按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。

2、有!important声明的规则高于一切。

3、如果!important声明冲突,则比较优先权。

4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。

5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。

CSS之优先级的更多相关文章

  1. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  2. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  3. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  4. 关于CSS的优先级,CSS优先级计算

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

  5. 转载css层级优先级。

    解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...

  6. CSS的优先级规则

    CSS的优先级规则有两类 1.位置群组规则 最高优先级为元素内嵌的style样式,如<div style=” “></div> 次高优先级为html头部中的<style& ...

  7. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  8. css的优先级以及!important的使用

    CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤).起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目 ...

  9. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  10. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

随机推荐

  1. webpack学习笔记--多种配置类型

    除了通过导出一个 Object 来描述 Webpack 所需的配置外,还有其它更灵活的方式,以简化不同场景的配置. 下面来一一介绍它们. 导出一个 Function 在大多数时候你需要从同一份源代码中 ...

  2. Vuex详解笔记2

    关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便. 简单用法:在vuex 的计算属性中返回vuex 的状态 最基本的使用方式,通过 ...

  3. 考虑实现一个不抛异常的swap

    Effective C++:参考自harttle land 类的swap实现与STL容器是一致的:提供swap成员函数, 并特化std::swap来调用那个成员函数. class Widget { p ...

  4. 10本Java架构师必读书籍

    1.大型网站系统与JAVA中间件实践 本书围绕大型网站和支撑大型网站架构的Java中间件的实践展开介绍. 从分布式系统的知识切入,让读者对分布式系统有基本的了解:然后介绍大型网站随着数据量.访问量增长 ...

  5. Spring MVC基础知识整理➣数据校验与格式化

    概述 将view中Form的数据提交到后台之后,后台如何验证数据的有效性?在这里Spring MVC提供了相应的Hibernate类包(hibernate-validator-4.3.1.Final. ...

  6. MediatR

    1.MediatR是什么? 微软官方eshopOnContainer开源项目中使用到了该工具, mediatR 是一种中介工具,解耦了消息处理器和消息之间耦合的类库,支持跨平台 .net Standa ...

  7. NSFileManager和NSFileHandler的作用, category的理解

    NSFileManager类可以管理文件系统中的文件和目录,也可以定位.判断是否存在.创建.拷贝.删除文件和目录,还可以获得文件和目录的信息: 对于读写文件,NSFileManager只可以读写字符串 ...

  8. 【Android】Android处理Home键方法小结

    实验几次之后(android4.1 和android4.2)发现在单个的activity里面有以下几个方法可以使用: 方法1:onSaveInstanceState方法 下面这个方法可以处理home的 ...

  9. 在vue-cli项目中使用bootstrap的方法示例

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-cli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...

  10. BZOJ1497 [NOI2006]最大获利 网络流 最小割 SAP

    原文链接http://www.cnblogs.com/zhouzhendong/p/8371052.html 题目传送门 - BZOJ1497 题意概括 有n个站要被建立. 建立第i个站的花费为pi. ...