老调重弹的CSS优先级
其次:我们能通过CSS为文档设置丰富且易于修改的外观,以减轻网页制作者的工作负担,从而减轻制作及后期维护的代价。
其实现在还来讲CSS是什么,CSS有什么作用完全是多余的,相信从事网页制作的朋友都已经或多或少的接触过了。
言归正传,我们开始进入今天的话题:
一、什么是CSS优先级?
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
二、CSS优先级规则
既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1. 统计选择符中的ID属性个数。
2. 统计选择符中的CLASS属性个数。
3. 统计选择符中的HTML标记名个数。
最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数(css2.1是用4位数表示)。( 注意,你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
例如:
1. 每个ID选择符(#someid),加 0,1,0,0。
2. 每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
3. 每个元素或伪元素(:firstchild)等,加0,0,0,1。
4. 其它选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。
三、特性分类的选择符列表
以下是一个按特性分类的选择符的列表:
选择符 |
特性值 |
h1 {color:blue;} |
1 |
p em {color:purple;} |
2 |
.apple {color:red;} |
10 |
p.bright {color:yellow;} |
11 |
p.bright em.dark {color:brown;} |
22 |
#id316 {color:yellow} |
100 |
单从上面这个表来看,貌似不大好理解,下面再给出一张表:
选择符 |
特性值 |
h1 {color:blue;} | 1 |
p em {color:purple;} | 1+1=2 |
.apple {color:red;} | 10 |
p.bright {color:yellow;} | 1+10=11 |
p.bright em.dark {color:brown;} | 1+10+1+10=22 |
#id316 {color:yellow} | 100 |
通过上面,就可以很简单的看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
优先级问题其实就是一个冲突解决的问题,当同一个元素(内容)被CSS选择符选中时,就要按照优先级取舍不同的CSS规则,这其中涉及到的问题其实很多。
说到这里,我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1 继承的表现
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
样式定义:body {color:#f00;}
举例代码:<p>CSS<strong>继承性</strong>的测试</p>
举例效果:
这段代码的应用结果是:“CSS继承性的测试”这段话是红颜色的,“继承性”几个字由于应用了<strong>标签,所以是粗体。很显然,这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例:在样式定义中添加一条:strong {color:#000;}。
举例效果:
发现只需要给<strong>加个颜色值就能覆盖掉它继承自<body>的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
4.2 继承的局限性
继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。
有一些属性不能被继承,如:border, margin, padding, background等。
样式定义:div {border:1px solid #000;}
举例代码:<div>我是<em>border</em>我是不能被继承滴</div>
预期效果:
实际效果:
从上面的效果中,我们可以看出,border是不能被继承的,还有一些其它的属性也是如此,这里就不一一列举。
五、附加说明
1. 文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式,而外部定义指经由<link>或<style>卷标定义的规则。
2. 有!important声明的规则高于一切。
3. 如果!important声明冲突,则比较优先权。
4. 如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5. 由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
6. 关于经由@import加载的外部样式,由于@import必须出现在所有其它规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。
还需要说一下,IE是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其它规则定义之前的,这可能会引发一些误会。
优先权问题看起来简单,但背后还是有非常复杂的机制,在实际应用中需要多多留意。
六、练习
看完上面的文字后,来做几道非常简单的题目。(自己答完前,请不要先看各题给出的链接地址哦)
1. 如何让使用两个使用相同样式名的元素具有不同的效果:css优先级测试
固定效果:
固定代码: <div class="test">传说中的测试</div>
<p class="test">传说中的测试</p>
2. 如何让<h3>始终为黑色,而<em>在不被<h3>包含的情况为红色:css优先级测试
固定效果:
固定代码: <h3>讨论<em>CSS</em>优先级</h3>
<p>讨论<em>CSS</em>优先级</p>
3. 如何写一个外部样式使得<h3 style="color:#000;"> 覆盖我</h3>的颜色为红色:css优先级测试
4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式:css优先级测试
固定代码:<p class="a b">传说中滴测试</p>
关于样式优先级,今天就先聊到这。
相关文章
- 作为一个Web开发者,掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题,为了广大web爱好者可以更好的解决问题,这里就CSS选择器的优先级问题做了一些总结2013-08-01
- 大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式2013-07-22
- 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序,既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重点2013-04-22
- 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序,CSS是层叠样式表(Cascading Style Sheets)的简称,我们能通过CSS为文档设置丰富且易于修改的外观2013-04-19
- css样式优先级是按照样式表中出现顺序还是按照元素中class或者id值的声明顺序呢,这个问题貌似一直存在我们身边却一直无从选择,接下来用实例为大家说明下,到底哪个高点,2013-03-14
- 多重样式(Multiple Styles): 如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况.有个例外的情况,就是如果外部样式放在内部样式的后面,则2013-02-01
CSS优先级和!important与IE6的BUG讨论及解决方案
本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不2013-01-23IE6下CSS多类选择符优先级不起作用的bug分析及解决方法
IE6,这个前端开发的梦魇总是在你不经意的时候给你捅一刀,在ie6环境下CSS多类选择符优先级不起作用,多么的令人气愤啊,经过测试:IE6下这种类组合的优先级不如单个类, 感2013-01-23- css样式的优先级是一个庞杂的知识点,我甚至觉得它的庞杂可以与“浮动”以及“框模型”相提并论,今天就利用点时间把我所了解的写下来,大家共同进步2013-01-11
- css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助2012-12-04
最新评论