CSS规则的执行顺序_第1页
CSS规则的执行顺序_第2页
CSS规则的执行顺序_第3页
CSS规则的执行顺序_第4页
CSS规则的执行顺序_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、CSS规则的执行顺序dadaV20160306本文向大家描述一下CSS执行顺序与优先权的问题，首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。CSS执行顺序与优先权的问题:CSS执行顺序与优先权的问题其实就是一个冲突解决的问题，当同一个元素(或内容)被CSS选择符选中时，就要按照优先权取舍不同的CSS规则，这其中涉及到的问题其实很多。首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于speci

2、ficity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一般规则：每个ID选择符(#someid)，加0,1,0,0；每个class选择符(.someclass)、每个属性选择符(形如attr=”"等)、每个伪类(形如:hover等)加0,0,1,0；每个元素或伪元素(:firstchild)等，加0,0,0,1；其他选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。按这些规则将数字串

3、逐位相加，就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。举一些例子吧：Example SourceCodeh1color:red; body h1color:green; 后者胜出 h2.grapecolor:purple;前者胜出h2color:silver; html>bodytabletrid="totals"tdul>licolor:maroon; li #answercolor:navy;后者胜除了specificity还有一些其他规则：文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如&

4、lt;divstyle=”color:red”>blah</div>的样式，而外部定义指经由<link>或<style>标签定义的规则。有!important声明的规则高于一切。如果!important声明冲突，则比较优先权。如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。关于经由import载入的外部样式，由于import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。这里需要

5、提一下IE，IE是可以识别位置错误的import的，但无论import在什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些误会。所以优先权问题虽然看起来简单，但其背后还是有蛮复杂的机制的，需要多多留意。1、特殊性首先来看一下这个例子将会发生的情形： 以下是代码片段：.grape color:Blue; H1 color: Red; <h1 class="grape">Meerkat <em>Central</em></h1> H1和.grape都匹配上面的H1元素，那么到底应该使用哪一个呢？实践证明.grape是

6、正确答案，把句子显示为蓝色。根据规范，一般的HTML元素选择符(H1,P 等)具有特殊性1，类选择符具有特殊性10，ID选择符具有特殊性100，值越大权重就越大，就优先选用。 以下是代码片段：H1 color: Red; P EM color: Blue; .grape color: Fuchsia; P.bright color: Yellow; P.bright EM.dark color: Gray; #ID01 color: Red; 2、继承在特殊性的框架下，被继承的值具有特殊性0，也就是说任何显式声明的规则将会覆盖其继承样式，即便这条规则具有多高的权重。 以下是代码片段：H1#ID

7、01 color: Red; EM color: Gray; <H1 ID="ID01>Meerkat <EM><Central</EM></H1> 虽然ID选择符特殊性最高，但由于在特殊性的框架下，继承值只有特殊性0，因些Central会显示为Gray颜色。 3、STYLE元素 还有sytle元素在CSS下权值定义为100，尽管ID选择也一样，实际上style元素比ID具有更高的特殊性。 以下是代码片段：#ID01 EM color: Gray; <H1 ID="ID01">Meerkat <

8、;EM style="color: red;">Central</EM>!</H1> 会显示为red颜色。4、重要性(!important)!important具最高特特性比如说1000，因此!important规则会覆盖内联STYLE属性的内容。 以下是代码片段：H1 color: red !important; <H1 style="color:black;">Meerkat Central!</H1> 将显示为RED颜色。 一种特殊情形 以下是代码片段：P#warn color: Red !im

9、portant; EM color: Black; <p id="warn">This text is red, but <em>emphasized text is black.</em></p> 虽然定义!important最高特殊性，但句子并没有全部显示为RED红色，为什么呢？也许我们得回头看看前面的规则，在前面的第二点继承中提“在特殊性的框架下，继承值只有特殊性0。”因此即便定义!important，继承里的特殊性也只有0，所以显示为特殊性为1的EM规则。权重顺序为：继承 => HTML普通选择符 => 类

10、选择符 =>style元素 => !important5、层叠1) 若两条规则具有相同的权值、起源及特殊性，那在样式表中最后出现的规则优先。2) 任何位于文档中的规则都比引入的规则优先。CSS样式覆盖规则大家都知道CSS的全称叫做“层叠样式表”，但估计很多人都不知道“层叠”二字的含义。其实，“层叠”指的就是样式的覆盖，当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值，这个过程就叫“层叠”。样式覆盖（这种叫法更大众化些）遵循一定的规则，之前我对这个规则一直似懂非懂的，直到这几天看了”CSS: The Missing Manual”，才豁然开朗。下面是

11、我的一些学习笔记。首先需要明确的是，很多情况都会导致一个元素被运用上多种样式，样式覆盖的规则也需要根据不同的情况来定，具体规则如下。规则一：由于继承而发生样式冲突时，最近祖先获胜。CSS的继承机制使得元素可以从包含它的祖先元素中继承样式，考虑下面这种情况：<html><head><title>rule 1</title><style>body color:black;p color:blue;</style></head><body> <p>welcome to <strong&g

12、t;gaodayue的网络日志</strong></p></body></html>strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。在上面的例子中，假如还指定了strong元素的样式，如：strong color:red;那么根据规则二，strong中的文字最终显示为红色。规则三：直接指定的样式发生冲突时，样式权值高者获胜。样式的权值取决于样式的选择器，权值定义如下表。CSS选择器权值标签选择器1类

13、选择器10ID选择器100内联样式1000伪元素(:first-child等)1伪类(:link等)10可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。规则四：样式权值相同时，后者获胜。考虑下面这种情况<p class="byline">Written by <a class="email" href="mailto:jeancosmofarmer.

14、 com">Jean Graine de Pomme</a></p>.byline a color:red;p .email color:blue;“.byline a”与”p .email”都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。规则五：!important的样式属性不被覆盖。

15、!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a color:red !important;”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。CSS规则的执行顺序你对CSS规则的执行顺序是否了解，这里和大家分享一下，若两条规则具有相同的权值、起源及特殊性，那在样式表中最后出现的规则优先。1、CSS规则之特殊性首先来看一下这个例子将会发生的情形：复制代码<style type=&qu

16、ot;text/css"> .grapecolor: Blue; H1color: Red;</style><h1 class="grape"> Meerkat <em>Central </em></h1>复制代码H1和.grape都匹配上面的H1元素，那么到底应该使用哪一个呢？实践证明.grape是正确答案，把句子显示为蓝色。根据规范，一般的HTML元素选择符(H1,P等)具有特殊性：1、类选择符具有特殊性10，ID选择符具有特殊性100，值越大，权重就越大，越优先。复制代码<style t

17、ype="text/css"> H1 color: Red; /*特殊性=1*/ PEM color: Blue; /*特殊性=2*/ .grape color: Fuchsia; /*特殊性=10*/ P.bright color: Yellow; /*特殊性=11*/ P.brightEM.dark color: Gray; /*特殊性=12*/ #ID01 color: Red; /*特殊性=100*/</style>复制代码2、CSS规则之继承在特殊性的框架下，被继承的值具有特殊性0，也就是说任何显式声明的规则将会覆盖其继承样式，即便这条规则具有多

18、高的权重。复制代码<style type="text/css"> #ID01color:Red; /*特殊性=100*/ EMcolor:Gray; /*特殊性=1*/</style><h1 id="ID01"> Meerkat<em> Central</em></h1>复制代码虽然ID选择符特殊性最高，但由于在特殊性的框架下，继承值只有特殊性0，因些Central会显示为Gray颜色。3、CSS规则之STYLE元素还有sytle元素在CSS下权值定义为100，尽管ID选择也一样，实际上style元素比ID具有更高的特殊性。<style type="text/css"> #ID01, EMcolor:Gray; </style><h1 id="ID01"> Meerkat<em style="color:red;"> Central</em></h1>会显示为red颜色。4、CSS规则之重要性(!important)!important具最高特特性比如说1000，因此!important规则会覆盖内联STYLE属性的内容。程序代码

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论