关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定
原则二: #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文件或<style>中如下定义:
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优先级计算的更多相关文章
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 举例详解CSS中的的优先级
计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺 ...
- CSS 从入门到放弃系列:CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- CSS介绍&选择器&选择器优先级
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- CSS选择器整理以及优先级介绍
一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- CSS的继承与优先级
CSS样式继承性 body,div,p{} html文档可以上图的种种节点树的形式表示,css层叠样式表中的各元素也有这种对应关系 <body>是文档中最大的根节点,body中的所有元素都 ...
- CSS样式定义的优先级顺序总结
CSS样式定义的优先级顺序总结 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 & ...
随机推荐
- centos6.5下安装mysql
http://www.centoscn.com/mysql/2014/0812/3481.html 1.使用yum命令安装mysql [root@bogon ~]# yum -y install m ...
- BZOJ1577 USACO 2009 Feb Gold 1.Fair Shuttle Solution
权限题,不给传送门啦!在学校OJ上交的.. 有些不开心,又是一道贪心,又是一个高级数据结构的模板,又是看了别人的题解还写崩了QAQ,蒟蒻不需要理由呀. 正经题解: 首先,我们可以由「显然成立法」得出, ...
- Struts2-----面试题汇总
1.struts2框架中,从用户发出请求到获得响应整个过程的流转图 FilterDispatcher --> ActionProxy-->Configuration Manager--&g ...
- 在Android上实现使用Facebook登录(基于Facebook SDK 3.5)
准备工作: 1. Facebook帐号,国内开发者需要一个vpn帐号(网页可以浏览,手机可以访问) 2. 使用Facebook的SDK做应用需要一个Key Hashes值. 2 ...
- 条件运算符(?:)和 $""替代string.Format()
1. 条件运算符(?:)根据Boolean表达式的值返回两个值之一.表达式如下: condition ? first_expression : second_expression 2. $" ...
- centos设置编码
CentOS6.5解决中文乱码与设置字符集 Windows的默认编码为GBK,Linux的默认编码为UTF-8.在Windows下编辑的中文,在Linux下显示为乱码.为了解决此问题,修改Linux的 ...
- 用arp-scan扫描局域网IP地址
1,在安装之前需要安装yum install -y libpcap libpcap-devel如果没有安装yum工具需要用rpm安装如下软件包[root@oradba arp-scan-1.8]# y ...
- Java数据库——JDBC 2.0操作
可滚动的结果集 让结果集滚动起来 //================================================= // File Name : JDBC20_demo //-- ...
- Java关键字——transient
当使用Serializable接口实现序列化操作时,如果一个对象中的某一属性不希望被序列化,则可以使用transient关键字进行声明 import java.io.File; import java ...
- CSS学习笔记——响应式布局
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...