CSS规则层叠时的优先级算法_经验交流

inline style 
embeded style 
external style 
user style 
inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦。它们往往以这样的面目出现:

<p style="color:red;">This is a paragraph.</p>
embeded style比inline style绅士一些,它们也寄宿在HTML文档中,但是它们不屑于与HTML元素扭成一团。它们往往在 <style> 元素中出现:

<style type="text/css" media="screen">
    p{
        color : red;
    }
</style>
external style是个贵族,它不愿意同HTML呆在一起,所以干脆以外部文件的形式独立存在。通常我们使用 <link> 元素或者@import语句将它们导入HTML。

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
我们应当尽可能使用external style,我想理由有很多,大家都知道,我也就不重复了。

还有一种user style与以上三者略有不同,如果你使用IE浏览器,那么你可以在Tools – Internet Options – General – Appearance – Accessibility – User style sheet 下找到添加user style的地方(原谅我没有中文版的IE浏览器)。

既然我们有如此多的添加style的方法,那么难以避免样式会产生层叠。如:

<p class="intro" style="color:red;">This is a paragraph.</p>
我们在使用以上inline style的同时,又在我们的external style中使用了:

p{
    color : yellow;
}
我们甚至还在拥有 class="intro" 的 <p> 元素上应用了:

p.intro{
    color : blue;
}
这样我们就 在同一元素的同一属性 color 上,拥有多条CSS规则指定了值 。这种情况被称为层叠(Cascading)。当层叠发生时,CSS Parser将根据优先级算法来确定最终选用的值。 

优先级算法按照先后顺序考虑以下三个方面:

CSS规则的重要性和来源 
CSS规则的特殊性 
CSS规则在文档中出现的顺序 
算法过程分为4步:

1、针对某一元素的某一属性,列出所有给该属性指定值的CSS规则。如上例中,在 class="intro" 的 <p> 元素上,有三条CSS规则指定了 color 属性。

2、根据声明的重要性和来源进行优先级排序

重要性有两种:

important 
normal(即非important) 
在CSS规则后添加 !important 的重要性要高于没有添加的。

来源有三种:

user agent stylesheet – 浏览器默认样式 
author stylesheet – 开发人员定义的样式 
user stylesheet – 用户在浏览器中定义样式 
重要性和来源的优先级排序从低到高是:

user agent stylesheet 
user style sheets中的normal规则 
author style sheets中的normal规则 
author style sheets中的important规则 
user style sheets中的important规则 
经过以上排序,如果有一条CSS规则的优先级高于其他所有竞争规则,那么算法结束,返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级,那么它们将要继续竞争下去,算法将进入第3步。

3、按照特殊性(Specificity)排序

CSS将计算多条规则中指定每一规则的selector的特殊性值,该值越高,优先级越高。

特殊性值是一个由4个整数组成的一个类似数组的值:a,b,c,d,其中a的权重最高,依次类推,d的权重最低。selector特殊性值的计算方法是:

如果该规则是一条inline style,那么a = 1 
如果该规则由selector指定,selector中出现的id selector的数量就是b的值 
如果该规则由selector指定,selector中出现的属性selector(包括class selector)或者伪类selector的数量总和就是c的值 
如果该规则由selector指定,selector中出现的元素selector或者是伪元素selector的数量总和就是d的值。 
universal selector * 的特殊性值为0,0,0,0 
官方网站 提供了一些例子可以加深理解。

在根据特殊性值排序时,由于a的权重最高,因此首先比较a,在a相同的情况,在比较b,依次类推。因此不论b,c,d值有多大,inline style总是具有最高的特殊性。

如果根据以上特殊性排序后,有一条CSS规则的优先级高于其他所有竞争规则,那么算法结束,返回该最高优先级指定的值。如果有多条CSS规则具有最高优先级,那么它们将要继续竞争下去,算法将进入第4步。

4、比较CSS规则在文档中出现的顺序

出现在后的总是比出现在前的具有更高的优先级,因此出现在最后的那条语句将被作为该属性的值。

至此,算法结束。我彻底晕了。

时间: 2024-10-02 18:34:34

CSS规则层叠时的优先级算法_经验交流的相关文章

CSS规则层叠时的优先级算法

CSS 规则的优先级是Web前端开发人员必须理解的一个概念,我们常用的添加样式的方法有4种. inline style embeded style external style user style inline style是丑陋的,它们穿梭在HTML文档中,与HTML元素扭成一团,给Web前端开发人员造成了许多麻烦.它们往往以这样的面目出现: <p style="color:red;">This is a paragraph.< /p> embeded sty

CSS规则层叠的应用 css必须要注意的几点_经验交流

理论基础是必要的,实践是提升和理解理论的方法,两者同样重要,任何设计和开发人员离开这两者的平衡,不论偏向哪一方,都会范或左或右的错误.不过我所讲的这个方法在实际应用中到底有什么用呢.显然,它不能够给我们创造出圆角矩形,也不能够给我们创造出分列布局,更加不可能给我们一个固定在文档头部的导航栏.这个算法的实践应用在于: 良好的CSS编程规范 .这是一个宏观的实践,与我刚才提到的微观实践同样重要,但却更加难以掌握. 本文并不想包含所有的良好的CSS编程规范,也不可能,我所能够提供的也只是我个人编写CS

更有效率的css代码编写第1/3页_经验交流

这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间.   一.排版: 1.关键词和操作符之间加适当的空格. 2.相对独立的程序块与块之间加空行 3.较长的语句.表达式等要分成多行书写. 4.划分出的新行要进行适应的缩进,使排版整齐,语句可读. 5.长表达式要在低优先级操作符处划分新行,操作符放在新行之首. 6.循环.判断等语

非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]_经验交流

在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过.这些 东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于此,便于自己学习! 1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用j

校内网css代码添加背景图片常用代码_经验交流

序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(URL)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {background-attachment:fixed|scroll} 5 背景定位 {background-position:数值|top|bottom|left|rig

CSS样式表常用小技巧收藏_经验交流

· ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值.  · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次:对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效.  · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE 设置成 A 显示是正常的,而在 Mozilla 里必须要设成 B 才能正常显示,或者两个倒过来. 临时解决方法:选择符 {属性名:B

CSS 使用Sprites技术实现圆角效果_经验交流

首先来简单说一下什么是Sprites,Sprites是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 第一步:创建我们的 Sprite 用PS等工具合成如图所示的图片(以一个像素的红线来区分) 第二步:编写HTML代码 首先,我们会给容器 div 一个 .roundedBox

CSS 浏览器的等宽空格问题解决_经验交流

但是   也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大. 同时,注意到 Safari 中的   宽度是已设定字符的空格宽度(Safari 的默认字体为 Times),也就是说一个中文字符需要两个占位符. 具体情况如下图所示: 其实,这不是 Safari 的问题,而是字体的问题.解决的方式就是使用下面的属性 font-family: '宋体';将 Safari 的默认字体设置成"宋体"等中英文等宽的字体,就能解决.Windows 版本的 Saf

CSS样式表的背景渲染效率_经验交流

我的MzTreeView1.0树控件发布至今,得到了不少意见反馈,很多网友给了我很多的中肯的建议,也指出了这个控件里的诸多BUG和不足之处,所以我准备写一个新版本的树,将大家的建议都整合进来实现.这几天我就一直在写新版的树,树控件最重要的是效率,特别是大节点量的时候,效率稍微差点的模式就会拖垮浏览器,所以新版的树我首要的还是提高效率,比如增加异步数据加载的支持等,另外我还有一个设想,就是树的树型结构竖线用样式表(背景图)来实现,样式表背景图片只需要加载一次,而现在这个模式(用多个<img>)图