详解CSS层叠机制

CSS（Cascading Style Sheet）

层叠样式表中的层叠意味着样式会从文档结构中的一个层次传递到另一个层次，其作用是让浏览器来决定在诸多源中，为某个标签应用来自哪个源的样式属性。

层叠是一种强大的机制。理解层叠有助于以最经济和最容易维护的方式来编写CSS，也有助于根据你的意愿创建出最理想的文档外观。

样式的来源

首先，应该有一个隐藏在浏览器中的浏览器样式表（默认样式表），因为每个标签无需编写什么就会带有样式。比如，h1标签中的文本会显示为较大的粗体，em标签中的文本会显示为斜体等等，一切都是自动添加的。

其次，是用户样式表。非常少见，但是能提供很大方便。例如，对于视力残障用户来说，可以自己增大文本的基准大小（例如：body { font-size:200%}），或者强制文本相互之间以容易辨认的颜色进行显示。Windows中辅助功能可以添加样式表。

最后，还有一个设计者样式表。就是web开发人员编写的。

浏览器对待样式来源的顺序：

默认的浏览器样式表

用户样式表

设计者样式表

设计者嵌入的样式

设计者内联的样式

当浏览器按照以上顺序查找相应位置的样式时，如果遇到了为某个标签定义的属性值，就会更新对相应标签的设置。浏览器在默认样式表中定义标签的样式，如果哦其他位置也为标签定义了样式，浏览器就会将设置更新为该文职定义的值。

这些就是层叠的基本工作原理。

层叠规则

规则1：找到应用于每个元素好属性的全部声明。

规则2：按次序和重要性排序。浏览器会依次检查5种样式来源，并设置所有匹配的属性。如果后面的来源再次设置了某个匹配的属性，那么浏览器会在必要时更新该属性的值并重复这一过程。

规则3：按针对性排序。在很难做出判断的情况下（比如两条规则匹配同一标签且是同一种样式来源），针对性可以决定规则的胜负。

例1：样式表中包含这两条规则，

P {font-size:12px;}

p.largetext { font-size:16px; }

那么，

A bit of text

中的文本将会显示为16像素高。因为后者更具有针对性。

P {font-size:12px;}

.largetext { font-size:16px; }

这两条规则都匹配同一个标签，但是因为类选择符优先，所以文本会显示16像素。具体原因是：标签选择符的数字针对性为1，而类选择符的针对性为1-0.这里存在一个如何计算选择符针对性的问题。针对每个样式都会有一个简单的计分系统，分值的表示形式如下3个值：

                   A – B – C

其中短线是分隔符，而不是减号。计分方法如下：

1.       选择符中存在一个ID，就要为A加上1。

2.       选择符中存在一个类，就要为B加上1。

3.       选择符中存在一个元素名（标签名），就要为C加上1.

4.       将最后的结果按照三位证书来计算。（结果并不是真正的三位数，只不过在多数情况下，将其理解为一个三位数更容易判断。比如，0-1-12与0-2-1相比，后者更具有针对性）

看下面一组例子：

P       0 – 0 – 1针对性=1

p.largetext       0 – 1 – 1针对性=11

p#largetext      1 – 0 – 1 针对性=101

body p#largetext     1 – 0 – 2 针对性=102

body p#largetext ul.mylist       1 – 1 – 3 针对性=113

body p#largetext ul.mylist li    1 – 1 – 4 针对性=114

规则4：按顺序排序。如果两条规则具有完全相同的权重，那么在层叠顺序中位于最下层的规则优先。

针对性比顺序更重要，因此具有更高针对性的规则要优先于在层叠中更靠近底层但针对性更低的规则。

以上是详解CSS层叠机制的详细内容。更多信息请关注PHP中文网其他相关文章！