CSS的“层叠”规则的总结
当你随机打开一个页面，查看源代码，你会发现，同一个元素，不止有一个CSS选择器及对应的样式。而一个元素只能应用一个样式，那么一堆样式中究竟是应用哪一个呢？这就涉及到CSS的层叠规则了。下面就来总结下CSS的层叠规则。
概念：CSS中的层叠就是让多个来源的样式叠加在一起，然后结合样式的特殊性（后面详细介绍）、继承性，确定最终应用的样式。
样式的来源分五种：
1、浏览器默认的样式；
2、用户自定义样式。一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；
3、外部样式，即<link>引用的CSS后缀文件；
4、内部样式，即写在<style></style>标签内的样式；
5、内联样式，即直接写在style属性内的样式（现在的网页设计强调结构、表现、行为三者分离，所以这个还是少用为好。我会强迫性移除内联样式的，哈哈）；
CSS权威指南中对样式来源的分类分成三种：
1、创作人员（上面提到的第3、4、5点都可归到这一点）
2、读者（用户自定义样式）
3、用户代理（这个就是上面所说的浏览器默认样式了）
来看一个例子：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<style>
#p1 #p2{
color:yellow;
}
.div1 .div2 #p1{
color:green;
}
.div1 .div2 p{
color:gray;
}
.div1 .div2 .impo{
color:green;
}
.impo{
color: brown !important;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p id="p1">Hello world</p>
<p id="p2" style="color: red">Hello, how are you!</p>
<p class="impo">I'm important!</p>
</div>
</div>
</body>
</html> Style.css文件的代码：
.div1 .div2 #p1{
color: blue;
}
这个例子中，这三行文字的颜色分别是什么呢？相信你们很多人也知道了。答案先不揭晓，继续往下看。
CSS2.1层叠规则是：
1、找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
2、按显式权重对应用到该元素的所有声明进行排序，有!important标志的声明的权重要高于不带!important标志的声明。
3、按来源对应用到给定元素的所有声明进行排序。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的的读者样式要强于所有其他样式，包括有!important标志的创作人员样式。创作人员的样式和读者样式斗都比用户代理的默认样式强。
4、按特殊性对应用到给定元素的所有声明进行排序，有较高特殊性的元素权重要大于有较低特殊性的元素。
5、按出现顺序对应用到给定元素的所有声明进行排序，后面出现的声明权重要大于前面出现的声明，即后定义的样式会覆盖前面定义的样式。
简单总结：找出一个给定元素的所有声明后，先按显式权重和来源进行排序。如果相同，则比较特殊性。若再相同，则比较顺序。
根据以上的知识，我们很明确知道了上面的例子三行文字的颜色是什么了：
第一行是文字的颜色是green；第二行文字的颜色是red；第三行文字颜色是brown。
下面着重讲解下选择器的特殊性：
1、对于内联样式，特殊性首位加1，即1，0，0，0。
2、对于选择器中出现的ID属性值，加0，1，0，0， 有多少个ID值就在第二位加几位。
3、对于选择器中出现的类属性值，属性选择及伪类，加0，0，1，0，共出现多少个就在第三位加几位。
4、对于选择器中出现的元素，以及伪元素，加0，0，0，1，共出现多少个就在第四位加几位。
5、通配符对特殊性没有任何贡献，即特殊性是0，0，0，0。
6、结合符没有特殊性，连0特殊性也没有。
7、继承的CSS完全没有特殊性，连0特殊性也没有（CSS中的继承是有选择性的，并不是全部CSS都继承，像边框属性就不会继承）。
注：伪元素选择器包含以下几种：
1、:first-line； 用于向文本的首行设置特殊样式；
2、:first-letter； 用于向文本的首字母设置特殊样式；
3、:before； 可以在元素的内容前面插入新内容；
4、:after； 可以在元素的内容之后插入新内容；
5、::selection 选择被用户选取的元素部分（CSS3中新加的选择器）；
下面再来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content #main-content h2{
color:red;
} #content #main-content>h2{
color:blue ;
}
body #content div[id="main-content"] h2{
color:green;
} #main-content div.paragraph h2{
color:orange;
}
#main-content [class="paragraph"] h2{
color:yellow;
}
div#main-content div.paragraph h2.first{
color:pink; }
</style> </head>
<body>
<div id="content">
<div id="main-content">
<h2>学习HTML</h2>
<div class="paragraph">
<h2 class="first">学习CSS</h2>
</div>
</div>
</div> </body>
</html>
这两个标题的颜色分别是什么呢？
用刚刚讲的特殊性规则计算下这六个样式的特殊性：
第一个规则特殊性的值是：0，2，0，1
第二个规则特殊性的值是：0，2，0，1
第三个规则特殊性的值是：0，1，1，3
第四个规则特殊性的值是：0，1，1，2
第五个规则特殊性的值是：0，1，1，1
第六个规则特殊性的值是：0，1，2，3
这样很明确知道了，特殊性最高的是第一和第二条规则，但第二条规则在后面，所以第一个标题的颜色是blue，第二个标题的颜色是red.
在这里要重点提一下，0特殊性（通配符）和没有特殊性（结合符和继承）是有很大差别的，这种差别决不能忽视。
看下面的例子，就可以看出两者的区别了：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
color:gray;
}
h1#page-title{
color:red;
}
</style>
</head>
<body>
<div>
<h1 id="page-title">Hello<em>world</em></h1>
</div>
</body>
</html>
这其中Meerkat的颜色是red，但Central的颜色是gray。因为通配符*的特殊性是0， 而继承的CSS是没有特殊性的，连0也没有，所以，通配符的权重要大于继承。
说了特殊性，这里也顺便引入一遍文章，这是对特殊性的另一方面的说明。
id 的选择器为什么要这么写 li#first？
CSS的“层叠”规则的总结的更多相关文章
- css知多少（3）——样式来源与层叠规则（转）
css知多少(3)——样式来源与层叠规则 上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看 ...
- 2CSS层叠规则(即引入CSS的三种不同方式的优先级)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css层叠规则（层叠样式表）
CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- 关于css的层叠上下文和层叠顺序问题
关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- CSS和层叠
##常见的CSS属性## color:red 设置元素内容的颜色 <br>text-align:center 设置文字的对齐方式(例:centeer 居中) <br>fon ...
- 现代 CSS 指南 -- at-rule 规则扫盲
大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...
- css的命名规则
本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...
随机推荐
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- Java替代C语言的可能性
前不久CSDN刊登了一篇<C语言已经死了>的文章,引起了一些争论.事实上那篇文章是从Ed Burnette的博客上转载来的,原文题目是“Die, C, die!”,直译过来应该是& ...
- UVa 1583 Digit Generator(数学)
题意 假设a加上a全部数位上的数等于b时 a称为b的generator 求给定数的最小generator 给的数n是小于100,000的 考虑到全部数位和最大的数99,999的数位和也才45 ...
- 蜗牛爱课－ iOS中定时器NSTimer使用
调用一次计时器方法: //不重复,只调用一次.timer运行一次就会自动停止运行 self.locationTimer = [NSTimer target:self selector: @selec ...
- 【11.2noip冲刺赛】 循环整数 （分段打表）
[问题描述]moreD在学习完循环小数之后发现循环是个很美好的性质.自己只需要记住短短的循环节以及循环次数(次数大于1,且是整数)就可以记住整个数字了.因为背诵数字变得方便了,moreD决定背诵[L, ...
- html5 Canvas处理图像 实例讲解
最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结: canvas常用功能: 1. 绘制矩形.圆形.曲线.组合图形 2. 绘制文本 3.绘制渐变.变形的图形 4. 图片 ...
- mysqli扩展库的 预处理技术 mysqli stmt
问题的提出? 现在需要向mysql数据库添加100个用户,请问如何实现? 思路: 使用for循环100次,向数据库中添加100个用户. 使用批量添加 $sql1=”insert xxx”; $ssql ...
- MUD江湖_MUD文字游戏_MUD五指_武林群侠_北侠_夺宝江湖_书剑_文字江湖游戏_MUD游戏下载
MUD江湖_MUD文字游戏_MUD五指_武林群侠_北侠_夺宝江湖_书剑_文字江湖游戏_MUD游戏下载 武侠类手机文字游戏,经典再现高度自由玩法宠物 自制装备 师徒自立门派 自造武功欢迎来玩 Q群 1 ...
- ecshop使用Google API及OAuth2.0登录授权(PHP)
一.申请clientID https://console.developers.google.com/project 二.开启Google+ API权限 https://console.develop ...
- LinuxCmd
Q1.关掉字符界面下的屏保 A:setterm -blank 0 Q2.top Top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. ...