权重和层叠规则决定了CSS样式优先级
一、基本的优先级规则
比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下:
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
- #redP p { /* 权值 = 100+1=101 */
- color:#F00;
- }
- #redP .red em { /* 权值 = 100+10+1=111 */
- color:#00F;
- }
- #redP p span em { /* 权值 = 100+1+1+1=103 */
- color:#FF0;
- }
权重和层叠规则决定了CSS样式优先级的更多相关文章
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- css样式优先级问题
官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 那么,我们来举个 ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- 强制改变css样式优先级
.list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...
- CSS样式优先级
关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
- 2CSS层叠规则(即引入CSS的三种不同方式的优先级)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css样式优先级计算规则
css样式的优先级分为引入优先级和声明优先级. 引入优先级 引入样式一般分为外部样式,内部样式,内联样式. 外部样式:使用link引入的外部css文件. 内部样式:使用style标签书写的css样式. ...
随机推荐
- java mkdir()和mkdirs()的区别
boolean mkdir() 创建此抽象路径名指定的目录. boolean mkdirs() 创建此抽象路径名指定的目录,包括创建必需但不存在的父目录. 也就是说,mkdir只能创建 ...
- wf(七)(手把手包会)
这个demo中我们将用If/Else逻辑加到工作流用来展示不同的message通过自定义的条件. 如果name的字符数是奇数,第一个单词就输出“Greeting”否则输出“Hello”. 1. 在Sa ...
- bootstrop框架
bootstrop基本的基础了解有如上图.. 下载源码 从GitHub可以直接下载到Bootstrap最新版本的LESS和JavaScript源码. Clone or fork via GitHub ...
- 《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算(一)
http://www.cnblogs.com/batteryhp/p/5046450.html 对数据进行分组并对各组应用一个函数,是数据分析的重要环节.数据准备好之后,通常的任务就是计算分组统计或生 ...
- HTML 5 视频
HTML 5 视频 ======================================================================================= 如今 ...
- 【Normal Form】数据库表结构设计所遵从的范式
参考的优秀文章 数据库(第一范式,第二范式,第三范式) 数据库设计是件严肃.关键的事儿,一毕业,加入一个大型的行业项目,那儿的前辈资深工程师,就给我灌输数据库如何关键.神圣.深不可测的观念,所以,我一 ...
- 复旦大学2015--2016学年第一学期(15级)高等代数I期末考试第八大题解答
八.(本题10分) 设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...
- PHP 编译安装
1, 获取源码wget -O php.tar.gz http://am1.php.net/get/php-5.6.27.tar.gz/from/this/mirrortar zxvf php.tar. ...
- java.lang.ExceptionInInitializerError /NoClassDefFoundError: [Lorg/hibernate/engine/FilterDefinition;
java.lang.ExceptionInInitializerError at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Nati ...
- maven 使用tomcat插件 自动化部署war
1.相关环境变量 idea tomcat8 maven3 2.增加tomcat user, 修改 $CATALINA_HOME/conf/tomcat-users.xml <tomcat-use ...