css层叠规则（层叠样式表）

CSS层叠规则：

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

2、按权重（!important）和来源对应用到给定元素的所有声明进行排序。

3、按特殊性对应用到给定元素的所有声明进行排序，有较高特殊性的元素权重要大于有较低特殊性的元素，0特殊性比无特殊性要强（继承）。

4、按出现顺序对应用到给定元素的所有声明进行排序，后面出现的声明权重要大于前面出现的声明，即后定义的样式会覆盖前面定义的样式。（适用于特殊性一样的时候）

解读：

一、权重和来源

来源：

1、创作人员（开发者）

　　1）、外部样式，即<link>引用的CSS后缀文件；

　　2）、内部样式，即写在<style></style>标签内的样式；

　　3）、内联样式，即直接写在style属性内的样式（网页设计强调结构、表现、行为三者分离，不建议使用。）；

2、读者（用户自定义样式：一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；）

3、用户代理（最主要的是：浏览器默认样式）

权重（由大到小的顺序排序）：

1）读者的重要声明（!important）

2）创作人员的重要声明（!important）（高于内联样式！）

3）创作人员的正常声明

4）读者的正常声明

5）用户代理的声明

二、样式继承

文档应用声明还有一个很重要的概念，即继承：它依赖于祖先-后代的关系的，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

CSS中的继承也是有选择性的，并不是全部CSS都继承，大多数框模型属性都不能继承，例如，内、外边距、背景和边框等。

例如：一个body定义了的颜色值也会应用到段落的文本中。

三、选择器的特殊性

1、对于内联样式，特殊性首位加1，即1，0，0，0。

2、对于选择器中出现的ID属性值，加0，1，0，0，有多少个ID值就在第二位加几位。

3、对于选择器中出现的类属性值，属性选择及伪类，加0，0，1，0，共出现多少个就在第三位加几位。

4、对于选择器中出现的元素，以及伪元素，加0，0，0，1，共出现多少个就在第四位加几位。

5、通配符对特殊性没有任何贡献，即特殊性是0，0，0，0。

6、结合符没有特殊性，连0特殊性也没有。

7、继承的CSS完全没有特殊性，连0特殊性也没有。

注意:因为通配符*的特殊性是0，而继承的CSS是没有特殊性的，连0也没有，所以，通配符的权重要大于继承。

特殊性计算示例：

h1{color:red;}  /*specificity = 0,0,0,1*/

p em{color:purple;}  /*specificity = 0,0,0,2*/

.grape{color:yellow;}  /*specificity = 0,0,1,0*/

*.grape{color:yellow;}  /*specificity = 0,0,1,0*/

p.grape em.dark{color:maroon;}  /*specificity = 0,0,2,2*/

#grape{color:blue;} /*specificity = 0,1,0,0*/

div#grape *[href] {color:silver;} /*specificity = 0,1,1,1*/

html > body > table tr[id="totals"] td ul > li{color:maroon;} /*specificity = 0,0,1,7*/

h1 + p{color:black;} /*specificity = 0,0,0,2*/

巴特西

css层叠规则（层叠样式表）

最新文章

热门文章