CSS的“层叠”规则的总结

最新推荐文章于 2021-06-22 20:40:34 发布

修行者坚守者

最新推荐文章于 2021-06-22 20:40:34 发布

阅读量327

点赞数

分类专栏： css

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

转：http://www.cnblogs.com/thislbq/p/5880128.html

当你随机打开一个页面，查看源代码，你会发现，同一个元素，不止有一个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>