CSS继承性之深入剖析（3）

作者：袖梨 2022-07-02

CSS继承性在应用中存在，那么在样式表中可能会有些读者搞不清，多个样式表同时应用到一个元素对象上会发生什么情形呢？先举个简单的例子，请运行下面的代码：
CSS网页布局 -
　　 [ 可先修改部分代码再运行查看效果 ]
　　我们会看到运行的效果：因为选择符h1和.aaa都匹配上面的h1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.aaa这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。而字体的大小，却是h1默认的大小。
　　样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
　　统计选择符中的ID属性个数。
　　统计选择符中的CLASS属性个数。
　　统计选择符中的HTML标记名格式。
　　最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
　　以下是一个按特性分类的选择符的列表：
　

代码如下	复制代码
H1 {color:blue;} 特性值为：1 　　P EM {color:purple;} 特性值为：2 　　.apple {red;} 特性值为：10 　　P.bright {color:yellow;} 特性值为：11 　　P.bright EM.dark {color:brown;} 特性值为：22 　　#id316 {color:yellow} 特性值为：100

　　从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。