目录

webkit中样式相关类及类间关系

资料来源: 《webkit技术上好的福分内幕》

结构相关类:

1.styleruleba类: 单个的样式规则(选择器+规则体)

2.stylesheetcontents类: 样式规则集,其成员-m_childrules是一个styleruleba实例的列表,是1:n的数量关系

3.cssstylesheet类: 成员-m_contents是一个stylesheetcontents实例,是1:1的数量关系

4.documentstylesheetcollection类: 多种来源的cssstylesheet实例(用户样式表,网页作者样式表,默认样式表)的归类列表

5.document类:

成员-m_stylesheetcollection: documentstylesheetcollection的实例,数量关系1:1成员-m_styleresover: 匹配css规则的相关类stylesheetresover的实例,数量关系1:1

规则匹配处理相关类:

1.rulet类: 单个css样式表经css解释器之后的结果集,并且按照关键选择器的类型分类

成员-m_idrules: 该样式表中的id类型规则成员-m_classrules: 该样式表中的class类型规则成员-m_tagrules: 该样式表中的标签类型规则成员-m_features: 该样式表中的其他特征类型规则

2.documentrulets类: 各种来源的样式表的合并(用户样式表/作者样式表/默认样式表)

成员-m_authorstyle: rulet对象的列广场设计说明表,代表作者样式表成员-m_urstyle: rulet对象的列表,代表用户样式表

3.stylesheetresover类: 规则匹配的主要负责类

成员-m_rulets: documentrulets类的实例

样式规则匹配

样式规则匹配大致过程

1.styleresover类以elem教育随笔大班entrulecollector类为工具,为指定的元素匹配规则,并将匹配结果保存到renderstyle对象中,renderstyle对象由负责该元素渲染的renderobject对象管理和使用

2.匹配的输入: styleresover类中保存的css解释器的解释和分类完毕的样式规则

3.匹配用到的工具类: elementrulecollector类

4.被匹配对象: 指定html元素

5.匹配结果: 保存至renderstyle对象并被renderobject用于元素渲染

规则匹配的详细过程

说明:

1.关键选择器: 样式规则的选择器字符串中的最右边选择器,它是样式规则在解释后分类的依据

2.匹配过程:

matchallrules: 匹配规则的最外层函数,包含匹配默认,用户和作者样式并收集和排序已匹配规则matchuarules: 匹配默认样式matchurrules: 匹配用户样式matchauthorrules: 匹配作者样式

3.作者样式匹配详细过程:(默认样式,用户样式的匹配类似)

匹配规则: 从右向左依次匹配选择器

前面我们已经知道解释之后的样式规则是分类存放在对象中的,而为当前元素匹配规则时,也是按id,class,tag,feature顺序依次匹配.

下面我们用伪代码来解释匹配的详细过程:(伪代码不是真正合理的和实际的代码)

1.重要参数

//参数e: 指代被匹配的元素//重要的变量var result=[]; //用于保存完全匹配的结果集

2.工具函数

function firstmatch(property,rulet){    //将元素的id/class/tag/feature与idrules/classrules/tagrules/featurerules匹配    //将匹配到的规则以数组返回,未匹配到返回空.}function gets(rule){    //获取单条rule规则的选择器数组}function match(s,e){    //将选择器s与元素e匹配    //如果成功匹配则返回true,否则返回fal}function leftmatch(rule,e){ //第一次匹配过后,用于处理结果集中单条规则的匹配的函数(调用match函数)    var s = gets(rule); //获取单条规则的选择器数组    for(var i=s.length-1;i>=0;i--){ //从右到左依次将选择器与元素e匹配                var flag = match(s[i],e);        if(!flag){ //一旦某次匹配失败,函数直接返回            return;        }    }    push(result,rule); //仅当所有选择器都匹配成功,即完全匹配时,才将该条rule添加到result}function rulematch(firstmatch,e){ //第一次匹配后的处理函数(调用leftmatch函数)    if(firstmatch为空){ //第一次匹配为空,直接返回        return;    }    for(var i=0;i<=firstmatch.length-1;i++){        leftmatch(firstmatch[i],e); //第一次匹配不为空,对每条匹配到的规则调用leftmatch    }}

3.id,class,tag,feature匹配的函数及调用顺序

//匹配idrules的函数function idmatch(idrules,e){    var firstmatch = firstmatch(e.id,idrules);    rulematch(firstmatch,e);}//匹配classrules的函数function classmatch(classrules,e){    var firstmatch = firstmatch(e.class,classrules);    rulematch(firstmatch,e);}//匹配tagrules的函数function tagmatch(tagrules,e){    var firstmatch = firstmatch(e.tag,tagrules);    rulematch(firstmatch,e);}//匹配featurerules的函数function featurematch(featurerules,e){    var firstmatch = firstmatch(e.feature,featurerules);    rulematch(firstmatch,e);}//函数调用顺序idmatch(idrules,e);classmatch(classrules,e);tagmatch(tagrules,e);featurematch(featurerules,e);

4.说明

firstmatch(property,rulet)函数: 代表按关键选择器的四种分类进行的第一次匹配,并返回匹配到的结果集(规则的数组)match(s,e)函数: 代表第一次分类匹配后,对结果集内的单条规则中的单个选择器与元素的匹配leftmatch(rule,e)函数: 代表第一次分类匹配后,对结果集内的单条规则的所有选择器(从右至左)与元素的匹配rulematch(firstmatch,e)函数 : 代表第一次分类匹配后,完成接下来所有的匹配任务.元素的内联样式是不经过上述匹配过程的,因为它本身就是专为该元素定义的样式.

权重(优先级)计算

1.选择器字符串的权重(specifishity)

(1)css中的权重模型(i-s-a-b-c)

其中:

i: 指代该规则是否为!important规则

s: 指代该规则是否为内联样式规则

a-b-c: 为内核定义的三类简单选择器

基础部分: a-b-c模型(以webkit为例)

浏览器内核用一个32位二进制数来表示某css规则的权重值,其基础部分的a-b-c模型是指权重计算的三类增量.

a: id选择器,增量为0x10000b: 类选择器,属性选择器和伪类选择器,增量为0x100c: 元素选择器和伪元素选择器,增量为1

说明:

上述三类增量的定义位于webkit内核中的csslector.h头文件中关于i和s,取值只有0和1,不属于增量模型,我们可以假定为该32位二进制数的最高位和次高位.**通用选择器(*)**,选择器组合符(+,>,~,空格,||)不影响权重值取反伪类 :not()在lector level 3标准(现行标准)中,:not()只接受一个简单选择器为参数,其本身不影响权重,其权重为其参数的权重在lector level 4草案中, :not()接受一个选择器列表为参数,其本身不影响权重,其权重为选择器列表中权重最高的参数的权重.

2.css规则权重的计算:

选择器字符串中:每出现一个c类简单选择器,权重值增1每出现一个b类简单选择器,权重值增0x100每出现一个a类简单选择器,权重值增0x10000如果是元素的内联规则,次高位置1(笔者假设)如果是!important规则,最高位置1(笔者假设)意义: 高权重值的规则将覆盖低权重规则中的相同属性的值(也就是:设置相同属性的值,高权重有效,地权重失效)

2.涉及到作者样式,用户样式,默认样式三种样式来源时的权重规则

作者样式/网页作者样式(author style sheets): 网页作者规定的样式(网页样式的主要来源)用户样式(ur style sheets): 用户自定义的个性样式(各大浏览器都在自行废除中)默认样式/浏览器样式(ur agent style sheet): 用户代理的默认样式(一般用于前两种都未涉及到的元素的样式)

一般,网页开发者和大多数用户考虑到的只有作者样式表和默认样式表(例如:用选择器*去掉默认样式中的元素margin和padding),而默认样式表中不含任何内联样式和!important样式.但是如果我们考虑上用户样式,权重规则可能会有一点不和谐的地方:(优先级从大到小)

用户样式!important规则 > 作者样式!important规则 > 内联样式 > 作者样式普通规则 > 用户样式普通规则

上面的优先级链中不包含内联!important规则,是因为一般的!important规则的目的就是为了以外部样式覆盖内联样式.

可见, 在普通规则和!important规则上, 两种样式表的权重情况是不同的.

一般规则: 作者样式 优先于 用户样式!important规则: 英语作文常用短语用户样式 优先于 作者样式

可能正是这样的不和谐,才使得各大浏览器都在逐渐废除用户样式吧.但是用户样式的实现可以借助浏览器插件间接实现,不过那又是另外国庆阅兵观后感2000字一个故事了.