你的位置:首页 > 网页设计

[网页设计]css细节复习笔记——结构与层叠


每个合法的文档都会生成一个结构树,有了结构树元素的祖先、属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心。继承是从一个元素向后代元素传递属性值所采用的机制。面向一个元素使用哪些值时,用户代理不仅要考虑继承,还要考虑特殊性,另外需要考虑声明本身的来源,这个过程就叫层叠

本文讨论3种机制之间的关联:特殊性、继承和层叠。

 

特殊性

同一元素可以使用不同的方法来选择元素。但是每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则的个个声明。如果一个元素有两个或多个冲突的属性声明,那么最高特殊性的声明会胜出。

特殊性计算规则:

1)对于选择器中给定的各个ID属性值,加0100

2)对于选择器中给定的各个类属性值,属性选择或伪类,加0010

3)对于选择器中给定的各个元素和伪元素,加0001

4)结合符和通配选择器对特殊性没有任何贡献

对于重叠的选择,如果符合多种规则,这些规则将累加计算。0011特殊性优于0001,0100优于0022。这是因为值从左向右排序。

题目:下列选择器同指向同一元素,容器的颜色应该为什么颜色?

div.container div.bright{background: #996699;}div.bright{background: #99CCCC;}div#id216{background: #FFFF66;}#id216{background: #CC3333;}div.container div#id216{background: #333399;}

考察特殊性,答案#333399;特殊性分别为:0022,0011,0101,0100,0112

 

注意:特殊性不是解决冲突的全部,实际上,所有样式冲突的解决都由层叠来处理。

到目前为止,我们只见过以0开头的特殊性。一般地,第一个0是为内联样式声明保留的,他比所有其他声明的特殊性都高。

<div class ="bright" id ="id216" style="background:#003300"></div>

有时候某个声明可能非常重要,超过了所有其他声明,并允许在这些声明的结束分号之前插入!important来标志。

#id216{ background: #990033 !important;}

当样式表增设!important时,内联冲突样式将会失效,以important为准。

 

继承

基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。

一般地,大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承,其原因是因为如果这些属性被继承,文档将会变得更加混乱。

继承的值根本没有特殊性,甚至连0特殊性都没有。(0特殊性比无特殊性要强)

不加区别地使用通配选择器可能存在的问题之一,由于他能匹配任何袁术,所以通配选择器往往有一种短路继承的效果。

 

层叠

如果特殊性相等的两个规则相同同时应用到同一个元素,浏览器会通过层叠解决这个冲突。

css所基于的方法就是让样式层叠在一切,这是通过结合继承和特殊性做到的。层叠的规则:

1)找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。

2)按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有 !important标志的规则。声明权重考虑5级:(权重有大到小顺序依次为)

    1.读者的重要声明

    2.创作人员的重要声明

    3.创作人员的正常声明

    4.读者的正常声明

    5.用户代理声明

3)按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。

4)按出现顺序对应用到给定元素的所有声明顺序。一个声明在样式表或文档中越后出现,他的权重就越大。。如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,在主样式表中的所有声明在后。

 

注意:多类选择符,以空格分割不同的类名,但是根据层叠的规则,元素中的类的顺序无关,而是与样式表声明的位置有关。

<div class = "box red blue yellow"></div>

red和blue和yellow设置冲突的背景颜色属性,但是,box最终显示的颜色和html中这三个类顺序无关。声明样式表如下:

.red{background: red;}.yellow{background: yellow;}.blue{background: blue;}

box最终显示的颜色以声明的顺序有关,最终显示为blue背景颜色。