Inheritance Rules
概述
[编辑]
网页浏览器加载一个页面的流程可以理解为：首先解析html数据形成文档树，然后搜索所有样式源；对选择器可适用的页面标记，按照样式被发现的顺序把样式属性附加到标记上形成一个属性队列。
样式声明具有!Important关键字的，被称为“重要性声明”，优先于普通样式。网页浏览器按照不同的重要性声明把每个标记的属性队列分为5个重要性层次或称重要性级别，如下图，rank 1具有最低优先级，rank 5具有最高优先级。
| rank 1 | 浏览器缺省样式 User Agent (UA)样式表中的，或者等价实现的 |
| rank 2 | 用户的普通样式声明 在用户样式表中没有!Important标记的内容。从特定站点和内建样式表的普通声明也可以合并到这里 |
| rank 3 | 作者的普通样式声明 作者的设定中没有!Important标记的内容。 包含文件头部、链接样式表、内联样式。 |
| rank 4 | 作者的!Important样式声明 Style Declarations 作者设定的带有!Important标记的内容。 包含文件头部、链接样式表、内联样式。 |
| rank 5 | 用户的!Important样式声明 用户的样式表中带有!Important标记的内容. 来自特定站点和内联样式表中带有!Important声明的内容也可并入. |
对同一标记上同一属性的同一重要性级别的样式，再比较其特殊性（specifity），再比较源位置（后发现的优先）。
为了让浏览器正常运行，每个属性都必须有一个值，该值对于该元素的格式设置是必不可少的。浏览器用其默认操作填补了巨量的缺失属性值。对于每个缺失的基本属性，它首先尝试从父元素继承一个合适的值，即从它周围的标签中继承；如果由于某种原因这不可能，浏览器会分配一个初始值。属性初始值在设计时在属性定义列表中预设。应用这些默认值的结果是为正在考虑的每个标签生成一组全面的指定值，其中包括所需的每个属性。下一个阶段是从指定的值中生成计算值，此时它们被称为实际值。
样式声明的重要性越高，就越需要注意缩小它们的特异性，以免它们在范围内变得过于霸道。
计算Specificity
[编辑]对于样式选择器，计算specificity的规则为：
- 通用选择器(*)或继承的值，总specificity增加0
- 对于内联样式，总specificity增加1000
- 对于ID选择器，总specificity增加100
- 对于类选择器、拟类选择器或属性选择器，总specificity增加10.
- 对于简单标记选择器或拟元素选择器，总specificity增加1
p { }
|
Total=1 |
div p { }
|
Total=2 |
p.topsection { }
|
Total=11 |
#toppara { }
|
Total=100 |
div table p#green { }
|
Total=103 |
style="float:left;"
|
Total=1000 |
a:hover { }
|
Total=11 |
p:first-line { }
|
Total=2 |
p[title] { }
|
Total=11 |
样式的继承
[编辑]样式的继承意味着在没有为子元素指定合适的样式时使用来自父元素的样式。样式的继承发生在级联之后，在可能的情况下填充缺失的属性值，当无法完成时，通过应用初始值，CSS 属性本身的默认值。请注意以下几点：
- 继承从父元素到子元素（如果有的话）发生，并且可以转移到任何嵌套深度，其中一个的子元素成为下一个的父元素。
- 如果子元素具有为其指定的相关样式，则父元素不能通过继承将样式传递给它。
- 如果 HTML 属性作为相关样式存在于子元素中，它甚至可以阻止继承。这是因为属性被赋予等效的 CSS 格式以在级联中起作用。他们在浏览器样式表中这样做。
- CSS 属性的初始值不参与级联。在级联之后，如果没有指定样式，则尝试通过继承来解决问题，如果仍然无法解决，则使用 CSS 属性定义表中找到的初始值。可能采用初始值的原因包括：
- 该属性未指定，在任何情况下都不能被继承
- 属性值存在，但它的值设置为 initial