css声明的优先级
选择器的特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0
一个选择器的具体特殊性如下确定
1、对于选择器给定的ID属性值,加0,1,0,0
2、对于选择器中给定的各个类属性,属性选择,或伪类,加0,0,1,0
3、对于选择器中给定的各个元素和伪元素,加0,0,0,1
4、通配符的选择器的特殊性为0,0,0,0
5、结合符对选择器特殊性没有一点贡献
6、内联声明的特殊性都是1,0,0,0
7、继承没有特殊性
总结:
内联样式,优先级1000
id选择器,优先级100
类和伪类,优先级10
元素选择器,优先级1
通配符,优先级0
继承的样式,没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较,
但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式
并集的选择器的优先级是单独计算
特殊性1,0,0,0大于所有的以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势
注意:id选择器和属性选择器
div[id="test"](0,0,1,1) and #test(0,1,0,0)
重要声明
有时某个声明比较重要,超过了所有的其他声明,css2-1就称之为重要声明
并允许在这些声明的结束分号之前插入!important来标志
必须要准确的放置!important 否则声明无效
!important总是要放在声明的最后,即分号的前面
标志位!important的声明并没有特殊性值,不过要与非重要声明分开考虑
实际上所有的重要声明会被浏览器分为一组,重要声明的冲突会在其内部解决(然后再去判断选择器的优先级)
非重要声明也会被分为一组,非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突,胜出的总是重要声明
继承
继承没有特殊性,甚至0特殊性都没有
0特殊性要比无特殊性来的强
来源
css样式的来源大致有三种
创作人员
读者
用户代理
权重:
读者的重要声明(用户,就是直接在浏览器写的样式)
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明(浏览器)
层叠
1.找出所有的相关规则,这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
再按选择器的特殊性排序
最终按排序
css声明的优先级的更多相关文章
- css声明应用优先级
1.特殊性 选择器的特殊值由四部分组成:0,0,0,0 第一位预留给内联样式 <h1 style="color:red;"></h1> 第二位属于ID选 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- css权重及优先级问题
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
- [程序猿入行必备]CSS样式之优先级
专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...
- css层叠样式优先级总结
虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...
- Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- css---6 选择器声明的优先级
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如 0,0,0,0一个选择器的具体特殊性如下确定: 1.对于选择器中给定的ID属性值,加 0,1,0,0 2.对于选择器中给定的各个类属性 ...
- CSS样式之优先级
说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级: 内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...
随机推荐
- CentOS7和OpenStack的笔记(一)
CentOS7和OpenStack的笔记(一) 最近搞CentOS7系统和OpenStack框架,整了近一个星期,系统装了好几次,框架搭了又从搭.虽然最后的实例没能启动成功,但是在这专研的一个星期里, ...
- linux内存碎片的概念
一般在内核术语中的“碎片”都是基于物理内存而言的,我没有太看懂你得出碎片是针对地址空间这个结论的逻辑.但我认为,既然你知道了malloc是用户空间调用的,那么你所谓的碎片也是从用户空间的视角而言的,但 ...
- 20155305《信息安全系统设计基础》10月18日课堂 fork,exic,wait
20155305<信息安全系统设计基础>10月18日课堂 fork,exic,wait fork()函数 1.fork函数作用 一般来讲, 我们编写1个普通的c程序, 运行这个程序直到程序 ...
- 2016-2017-2 20155331 实验二《Java面向对象程序设计》实验报告
2016-2017-2 20155331 实验二<Java面向对象程序设计>实验报告 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握U ...
- cv::Mat转换QImage
cvtColor(img, img, CV_BGR2RGB); QImage image((uchar*)img.data,img.cols,img.rows,QImage::Format_RGB88 ...
- SaltStack入门篇(五)之salt-ssh的使用以及LAMP状态设计部署
1.salt-ssh的使用 官方文档:https://docs.saltstack.com/en/2016.11/topics/ssh/index.html ()安装salt-ssh [root@li ...
- Objective-C 方法交换实践(一) - 基础知识
一.Objective-C 中的基本类型 首先看下 Objective-C 的对象模型,每个 Objective-C 对象都是一个指向 Class 的指针.Class 的结构如下: struct ob ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...
- L014-第三关课前linux命令及基础知识考试手把手实战解答小节
又是一周啊,以后保持一周一个微博吧. 这是一个堂解答考试题的课,那么就以题目来展开吧! 1.如何取得/etiantian文件的权限对应的数字内容,如-rw-r--r--为644,要求用命令获得644这 ...
- linux安装PHP-memcache-redis扩展
1.php memcache 扩展 http://pecl.php.net/package/memcache/3.0.8 下载文件源码 #tar zxvf memcache-3.0.8.tar#/us ...