当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个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的“层叠”规则的总结的更多相关文章

  1. css知多少(3)——样式来源与层叠规则(转)

    css知多少(3)——样式来源与层叠规则   上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看 ...

  2. 2CSS层叠规则(即引入CSS的三种不同方式的优先级)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. css层叠规则(层叠样式表)

    CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...

  4. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

  5. 关于css的层叠上下文和层叠顺序问题

    关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...

  6. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  7. CSS和层叠

    ##常见的CSS属性## color:red  设置元素内容的颜色 <br>text-align:center  设置文字的对齐方式(例:centeer 居中) <br>fon ...

  8. 现代 CSS 指南 -- at-rule 规则扫盲

    大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...

  9. css的命名规则

    本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...

随机推荐

  1. Windows下搭建Eclipse+Android4.0开发环境

    官方搭建步骤: http://developer.android.com/index.html 搭建好开发环境之前须要下载以下几个文件包: 一.安装Java执行环境JRE(没这个Eclipse执行不起 ...

  2. 模块化的JavaScript

    我们再一次被计算机的名词,概念笼罩. backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而来. CommonJS.AMD.NodeJS.RequireJS.SeaJS ...

  3. 【单调队列】【3-21个人赛】【problmeB】

    Problem B Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Sub ...

  4. 搭建MyBatis框架

    一.开发环境 1.JDK 1.6.0_22 2.MyEclipse 10.7.1 3.Oracle_10g_10.2.0.4 注:各软件版本不是必须的,正常任意版本都行,文件较大就不附上下载地址了,推 ...

  5. MySql命令行命令和SQL语句

    一.常用mysql命令行命令 1.启动MYSQL服务 net start mysql 停止MYSQL服务 net stop mysql 2.netstat -na|findstr 3306 查看被监听 ...

  6. 对js中prototype的理解

    一直不理解child.prototype = new Parent()和child.prototype =Parent.prototype的区别,到现在为止,我觉得它俩最大的区别就是:前者共享构造器里 ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. (转)解决JSP路径问题的方法(jsp文件开头path, basePath作用)

    在JSP中的如果使用 "相对路径"  则有可能会出现问题. 因为 网页中的 "相对路径" , 他是相对于 "URL请求的地址" 去寻找资源. ...

  9. Android 测试工具集02

    User scenario testing for Android(功能性测试框架) Robotium is an Android test automation framework that has ...

  10. 初学swift笔记 流程控制(五)

    import Foundation ; i<=; i++ { println(i) } let str1="adl;fjasdfl;ouewrouqwperuadf" for ...