在CSS中,如果某个元素可以匹配中多条样式规则时,如何判定使用哪一条规则,这就是一个优先级问题?
带着这个问题,在Google中找到下面这篇web,对上面的问题,做了一番解释。现在转贴于下,作为了解的起点。
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 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中的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的值
e.g.
#AA{
color:blue;
}
优先级高于
.test{
color:red;
}
如果该规则由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规则在文档中出现的顺序
出现在后的总是比出现在前的具有更高的优先级,因此出现在最后的那条语句将被作为该属性的值。
对于其中的按照特殊性(Specificity)排序,下面的web做了一些更具体的示例,包括图示解释,可以帮助理解。
关于CSS Selector的优先级
如果要了解更多,首先可以从CSS的官网上寻找:
http://www.w3.org/Style/CSS/
分享到:
相关推荐
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。 CSS优先级 来看一个例子: 文本的颜色 p strong{ color:black} /*权重为:1+1*/ strong.blue{ color:green;} /*权重为:1+10*/...
css样式应用优先级实用PPT课件.pptx
在同一个级别的情况下,最后指定的规则优先级就越高,也就是我们通常说的就近原则;html中标签的style的属性都高于css文件中的选择器样式; 标有”!important”的规则有最高优先级。 我们可以利用!important...
例如,如果在LINK所链接的样式表(mycss.css)中定义了以下一条样式规则: H1{color:red}同时在嵌入式样式定义中也定义了一条规则:H1{color:yellow}在网页中的样式定义如下所示:<HEAD><LINK rel=...
详解CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。 最近看到篇对CSS优先级有比较好的解释的...
主要介绍了CSS优先级计算的规则,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
关于CSS specificity CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个...
CSS 规则的优先级是Web前端开发人员必须理解的一个概念,我们常用的添加样式的方法有4种。
首先,给大家看一篇关于CSS优先级的示例 复制代码代码如下: <span xss=removed><html> <head> <style type=”text/css”> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...
介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
优先级是由选择器组成的匹配规则决定的。 如何计算?优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值. 如果优先级相同,元素最终会应用 CSS 中靠后的声明. 注意: 在文档...
通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...
一、css的优先级 今天有人跟我说csshack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本... 我们先看看css的优先级的几个基本的规则: ID选择器(形如#id{}
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是重点。
CSS概述 CSS设置方式 CSS语法 样式规则注释和样式规则优先级 CSS的属性分类介绍
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。 当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖...
主要介绍了CSS编写中的属性优先级问题,重点讲解了元素之间的层级计算以及继承关系,需要的朋友可以参考下