首页 > 网站 > WEB开发 > 正文

CSS结构和层叠

2024-04-27 14:32:20
字体:
来源:转载
供稿:网友
CSS结构和层叠

每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素。有了这个结构树,选择器才能起作用,这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠。

1.特殊性 每个选择器都有特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。若一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明将胜出。

特殊性顺序 “important > 内联 > ID > 类| 伪类 | 属性选择> 标签|伪对象 > 通配符”> 继承

Selectors 选择符

SyntaxSamples 语法

ensample 示例

Specificity 特性

通配选择符(UniversalSelector)

*

*.div{width:560px;}

0,0,0,0

类型选择符(TypeSelectors)

E1

td{font-size:12px;}

0,0,0,1

伪类选择符(Pseudo-classesSelectors)

E1:link

a:link{font-size:12px;}

0,0,1,0

属性选择符(AttributeSelectors)

E1[attr]

h[title]{color:blue;}

0,0,1,0

ID选择符(IDSelectors)

#sID

#sj{font-size:12px;}

0,1,0,0

类选择符(ClassSelectors)

E1.className

.sjweb{color:blue;}

0,0,1,0

子对象选择符(ChildSelectors)

E1>E2

body>p{color:blue;}

E1+E2

相邻选择符(AdjacentSiblingSelectors)

E1+E2

div+p{color:blue;}

E1+E2

选择符分组(Grouping)

E1,E2,E3

.td1,a,body{color:blue;}

E1 E2 E3

包含选择符(DescendantSelectors)

E1E2

tabletd{color:blue;}

E1+E2

2.重要性 有时某个声明可能很重要,超过了所有其他声明,CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标志。 标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。类似地,我们认为所有非重要声明也归为一组,使用特殊性来解决冲突。若一个重要声明和一个非重要声明冲突,胜出的总是重要声明。 3.继承 基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。继承是CSS中最基本的内容,除非有必须,否则一般不会特别考虑。不过需要注意以下几点: 1)注意有些属性不能被继承,这往往归因于一个简单的常识。一般地,大多数框模型属性(包括外边距,内边距,背景和边框)都不能被继承。 2)继承的值根本没有特殊性,甚至连0特殊性都没有。如下:

java代码收藏代码
  1. *{color:gray;}
  2. h1#page-title{color:black;}
  3. <h1id="page-title">Meetkat<em>CEntral</em><h1>
  4. <p>Welcometothebestplaceontheweb</p>

因为通配选择器适用于所有元素,而且有0特殊性,其颜色声明指定的值gray要优先于继承值(black),因为继承值根本没有特殊性。故em元素会显示为灰色而不是黑色。 4.层叠 CSS所基于的方法是让样式层叠在一起,这是通过继承和特殊性做到的,CSS2.1的层叠规则如下: 1)找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器 2)按显式权重对应用到给定元素的所有声明排序。标志!important的规则的权重高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员,读者,用户代理。正常情况下,创作人员的样式要胜于读者的样式表,有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。 3)按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重重要大于较低特殊性的元素。 4)按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入样式表的话,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。 接下来对2)3)4)详细说明: 2)按权重和来源排序 若两个样式规则应用到同一个元素,而且其中一个规则有!important标志,这个重要规则将胜出。在声明权重方面要考虑5级,权重由大到小的顺序依次为: 1.读者的重要声明 2.创作人员的重要声明 3.创作人员的正常声明 4.读者的正常声明 5.用户代理声明 3)按特殊性排序若 若向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则要按特殊性排序,最特殊的声明最优先。 4)按顺序排序 若两个规则的权重,来源和特殊性完全相同,那么在样式表中后出现的一个会胜出。特别地,认为元素style属性中指定我样式位于文档样式表的最后,即放在所有其他规则的后面。不过,这一点已经没有意义了,因为CSS2.1明确指明内联样式的特殊性要高于所有样式表选择器。 正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-hover-active(LVHA)。

Java代码收藏代码
  1. :link{color:blue;}
  2. :visited{color:purple;}
  3. :hover{color:red;}
  4. :active{color:orange;}

这四个选择器的特殊性都是一样的:0,0,1,0。因为它们有相同的权重,来源,特殊性,故与元素匹配的最后一个选择器才会胜出。 正在“点击”的未访问链接可以与其中3个规则匹配——:link,:hover,:active——所以在这三个规则当中最后声明的一个胜出。若按照LVHA顺序,:active将会胜出,这也正是所期望的。 5.非CSS表现提示 文档有可能包含非CSS的表现提示,例如font元素。非CSS提示被处理为特殊性为0,并出现在创作人员样式表的最前面。只要有创作人员或读者样式,这种表现提示就会被覆盖,但用户代理的样式不能将其覆盖。

注意:

1.行内样式优先级Specificity值为1,0,0,0,高于外部定义。

如:<divstyle=”color:red”>sjweb</div>

外部定义指经由<link>或<style>标签定义的规则;

2.!important声明的Specificity值最高;

3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;

4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

5.由于它能匹配任何元素,所以通配选择器往往有一种短路继承的效果。

6..当遇到多个选择符同时出现时候,按选择符得到的Specificity值逐位相加{数位之间没有进制比如说:0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0}就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。

-----------以上内容都是权重理论上的知识,按理说支持css2.1的浏览器应该都遵循----------------- IE6和IE7却不完全是那么回事;这里说的IE7排除掉IE8的兼容模式。

Java代码Flashvars" value="clipboard=a%20%7B%20%2F*%20%E6%9D%83%E9%87%8D%E4%B8%BA%5B0%2C0%2C1%5D%20*%2F%0A%20%20%20%20color%3A%20%2300f%3B%0A%20%20%20%20background-color%3A%20%23ff0%3B%0A%7D%0Aa%3Ahover%20%7B%20%2F*%20%E6%9D%83%E9%87%8D%E4%B8%BA%5B0%2C1%2C1%5D%20*%2F%0A%20%20%20%20color%3A%20%23ff0%3B%0A%20%20%20%20background-color%3A%20%2300f%3B%0A%7D%0A%E8%BF%99%E6%98%AF%E5%9F%BA%E7%A1%80%E6%A0%B7%E5%BC%8F%EF%BC%9A%E8%93%9D%E8%89%B2%E5%AD%97%EF%BC%8C%E9%BB%84%E8%89%B2%E8%83%8C%E6%99%AF%EF%BC%8C%E9%BC%A0%E6%A0%87%E6%82%AC%E5%81%9C%E7%9A%84%E6%97%B6%E5%80
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表