当你随机打开一个页面，查看源代码，你会发现，同一个元素，不止有一个CSS选择器及对应的样式。而一个元素只能应用一个样式，那么一堆样式中究竟是应用哪一个呢？这就涉及到CSS的层叠规则了。下面就来总结下CSS的层叠规则。

概念：CSS中的层叠就是让多个来源的样式叠加在一起，然后结合样式的特殊性（后面详细介绍）、继承性，确定最终应用的样式。

样式的来源分五种：

1、浏览器默认的样式；

2、用户自定义样式。一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；

3、外部样式，即<link>引用的CSS后缀文件；

4、内部样式，即写在<style></style>标签内的样式；

5、内联样式，即直接写在style属性内的样式（现在的网页设计强调结构、表现、行为三者分离，所以这个还是少用为好。我会强迫性移除内联样式的，哈哈）；

CSS权威指南中对样式来源的分类分成三种：

1、创作人员（上面提到的第3、4、5点都可归到这一点）

2、读者（用户自定义样式）

3、用户代理（这个就是上面所说的浏览器默认样式了）

来看一个例子：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <link rel="stylesheet" href="style.css" type="text/css">
  5.  <style>
  6.      #p1 #p2{
  7.          color:yellow;
  8.      }
  9.      .div1 .div2 #p1{
  10.          color:green;
  11.      }
  12.      .div1 .div2 p{
  13.          color:gray;
  14.      }
  15.      .div1 .div2 .impo{
  16.          color:green;
  17.      }
  18.      .impo{
  19.          color: brown !important;
  20.      }
  21.  </style>
  22.  </head>
  23.  <body>
  24.      <div class="div1">
  25.          <div class="div2">
  26.              <p id="p1">Hello  world</p>
  27.              <p id="p2" style="color: red">Hello, how are you!</p>
  28.              <p class="impo">I'm important!</p>
  29.          </div>
  30.      </div>
  31.  </body>
  32.  </html>
  33.  
  34.  Style.css文件的代码：
  35.  .div1 .div2 #p1{
  36.      color: blue;
  37.  }

这个例子中，这三行文字的颜色分别是什么呢？相信你们很多人也知道了。答案先不揭晓，继续往下看。

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中新加的选择器）；

下面再来看一个例子：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <style type="text/css">
  5.       #content #main-content h2{
  6.       color:red;
  7.        } 
  8.  
  9.       #content #main-content>h2{
  10.       color:blue ;
  11.        }
  12.       body #content div[id="main-content"] h2{
  13.       color:green;
  14.        }
  15.  
  16.       #main-content div.paragraph h2{
  17.       color:orange;
  18.        }
  19.       #main-content [class="paragraph"] h2{
  20.       color:yellow;
  21.        }
  22.       div#main-content div.paragraph h2.first{
  23.       color:pink;
  24.  
  25.       }
  26.  </style>
  27.  
  28.  </head>
  29.  <body>
  30.  <div id="content">
  31.    <div id="main-content">
  32.      <h2>学习HTML</h2>
  33.      <div class="paragraph">
  34.        <h2 class="first">学习CSS</h2>
  35.      </div>
  36.    </div>
  37.  </div>
  38.  
  39.  </body>
  40.  </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特殊性（通配符）和没有特殊性（结合符和继承）是有很大差别的，这种差别决不能忽视。

看下面的例子，就可以看出两者的区别了：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <style type="text/css">
  5.  *{
  6.      color:gray;
  7.  }
  8.  h1#page-title{
  9.      color:red;
  10.  }
  11.  </style>
  12.  </head>
  13.  <body>
  14.  <div>
  15.      <h1 id="page-title">Hello<em>world</em></h1>
  16.  </div>
  17.  </body>
  18.  </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. VB读写Excel

        近期用excel和VB比較多,就简单的学习了一下VB中对Excel的处理.今天就介绍一些吧.       在VB中要想调用Excel,须要打开VB编程环境“project”菜单中的“引用”项目 ...

  2. windows7旗舰版64位下安装、破解及执行QTP11报错

    说明:假设你出现了下面几种情况,希望能解决你的问题:假设没有,就当路过. 1.安装qtp11时报vc++ 2005缺少,但怎么也不能安装成功 解决方法: 1.找到qtp安装包里面的vc++ 2005组 ...

  3. Unity 利用NGUI2.6.3做技能冷却的CD效果

    NGUI非常强大我们今天来学习一下,如何利用NGUI做技能冷却的CD效果.先导入NGUI的插件.没有的话这里有啊NGUI2.6.3下载地址: http://vdisk.weibo.com/s/KLqn ...

  4. UI设计师不可不知的安卓屏幕知识

    不少设计师和工程师都被安卓设备纷繁的屏幕搞得晕头转向,我既做UI设计,也做过一点安卓界面布局,刚好对这块内容比较熟悉,也曾在公司内部做过相关的讲座,在此,我将此部分知识重新梳理出来分享给大家! 1.了 ...

  5. JS获取客户端IP地址、MAC和主机名七种方法

    一.使用JS获取客户端IP的几个方法方法一(只针对IE且客户端的IE允许AcitiveX运行,通过平台:XP,SERVER03,2000).获取客户端IP代码:<HTML><HEAD ...

  6. DSOframer 的简单介绍和资源整理

    DSOframer 是微软提供一款开源的用于在线编辑 Word. Excel .PowerPoint 的 ActiveX 控件.国内很多著名的 OA 中间件,电子印章,签名留痕等大多数是依此改进而来的 ...

  7. javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别

    javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...

  8. html form表单提交数据并后台获取

    前台: HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) <h ...

  9. SQLServer 2012 已成功与服务器建立连接，但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时。

    楼主用SQL Server 2012 在连接其他电脑的实例时,一直提示“已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - ...

  10. BF算法（朴素的模式匹配算法）

    #include <stdio.h> #include <stdlib.h> int Index_BF(char S[],char T[])//s为目标串(长串),t为模式串( ...