CSS权威指南学习笔记--Chapter3结构和层叠

Chapter3 结构和层叠

一、 特殊性：类似于优先级的概念

对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则的声明中。如果一个元素有多个冲突的属性声明（注意：仅对于冲突的属性会做特殊性的判断，不冲突的属性没有这个判断），则最高特殊性的声明就会胜出。

一个选择器的特殊性如下确定：

• 对于选择器中给定的各个ID属性值，加0,1,0,0；
• 对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0；
• 对于选择器中给定的各个元素和伪元素，加0,0,0,1；
• 结合符和通配选择器对特殊性没有任何贡献。

h1 {color:red;} /*0,0,0,1*/
p em {color:purple;} /*0,0,0,2*/
.grade {color:purple;} /*0,0,1,0*/
p.bright em.dark {color:red;} /*0,0,2,2*/
div#sidebar *[href] {color:silver;} /*0,1,1,1*/

Notice：值是从左到右进行排序的。

1.声明和特殊性：

一旦确定一个选择器的特殊性，这个值将授予其所有相关声明。

h1 {color:silver; background:black;}    /*0,0,0,1*/

解组为以下单独的规则：

h1 {color:silver;}  /*0,0,0,1*/
h1 {background:black;}  /*0,0,0,1*/

2.通配选择器特殊性：对特殊性没有贡献。

3.ID和属性选择器的特殊性：

ID选择器和指定id属性的属性选择器在特殊性上有所不同。

#meadow {color:green;} /*0,1,0,0*/
*[id=”meadow”] {color:red;} /*0,0,1,0*/

• ID选择器的贡献0,1,0,0；
• 指定id属性的属性选择器的贡献0,0,1,0；

4.内联样式特殊性：

每个内联样式声明的特殊性都是1,0,0,0

h1#meadow {color:red;}
<h1 id=”meadow” style=”color:green;”>The Meadow party</h1> /*特殊性最高*/

5.重要性：

重要声明：在结束分号之前插入!important来标志。

每个声明都需要它自己的!important标志。

p.dark {color:green !important; background:silver !important;}

如果一个属性有多个关键字，则!important标志放在声明最后。

p.dark { color:green !important; font:smaller Times,serif !important;}

所有!important声明会分组在一起，重要声明的特殊性冲突会在重要声明内部解决，不会和非重要声明冲突。重要声明和非重要声明总是重要声明胜出。

h1 {font-style:italic; color:gray !important;}
.title {color:black; background:silver;}
* {background:black !important;}

<h1 class=”title”>Hello World!</h1>

最终显示的结果会是 {background:black;color:gray;font-style:italic;}

---

二、 继承

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

h1 {color:gray;}
<h1>Hello <em>World!</em></h1> /*不仅h1的文本会变成gray，em元素也会变成gray*/

声明会沿着文档树传播到后代元素，直到没有更多的后代元素继承这个声明。

Notice：有些属性不能被继承，包含大多数的框模型属性（外边距，内边距，背景，边框等）。
继承的值没有任何特殊性，连0都没有。

* {color:gray;}
h1#page-title {color:black;}

<h1 id=”page-title”>Hello<em>World!</em></h1>/*Hello显示为black,World!显示为gray*/

通配选择器匹配所有的元素，而且有0特殊性。继承值black没有特殊性，所以显示为gray。

---

三、 层叠

目的：解决特殊性相等的两个规则的问题；

CSS2.1层叠规则：

• 找出相关规则。
• 按显示权重对应用到该元素的所有声明进行排序。
• 按特殊性对应用到给定元素的所有声明进行排序。
• 按出现顺序对应用到给定元素的所有声明进行排序。越后出现，权重越大。

1.按显示权重排序–权重和来源：

• 如果两个样式规则应用到同一个元素，而且其中一个有!important标志，则胜出。

p {color:gray !important;}/*胜出*/
<p style=”color:red;”>Hello World!</p>

• 如果一个元素与创作人员样式表中的正常权重样式匹配，且读者样式表正确权重样式也匹配，则会使用创作人员样式表。
• 读者重要声明大于所有。

总结如下：
1) 读者重要声明
2) 创作人员重要声明
3) 创作人员普通声明
4) 读者普通声明
5) 用户代理声明

2.按特殊性排序：

如果向一个元素应用多个彼此冲突的声明，且权重相同，则特殊性高的优先。

3.按出现顺序排序：

如果两个样式表权重，来源，特殊性相同，则出现越后的胜出。

文档中包含的规则高于导入的规则。

链接样式推荐顺序：LVHA (:link-:visited-:hover-:active)

4.非CSS表现形式：

特殊性处理为0，并出现在创作人员样式表最前面。只要有读者或创作人员样式，则会被覆盖。

---