当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个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也没有,所以,通配符的权重要大于继承。
说了特殊性,这里也顺便引入一遍文章,这是对特殊性的另一方面的说明。
所有评论(0)