接上文

2、样式的层叠和继承

浏览器根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。

每个元素都有一套浏览器呈现页面时要用到的CSS属性。

2.1、浏览器样式

浏览器样式（用户代理样式）：元素尚未设置样式时浏览器应用在它身上的默认样式。

虽然不是每一个HTML元素都有默认的浏览器样式，但是多数元素都有（在HTML部分都有介绍每个元素的默认样式）

2.2、用户样式

大多数浏览器都允许用户定义自己的样式表，这类样式表中包含的样式称为用户样式（用的不多）

各种浏览器都有自己管理用户样式的方法：以谷歌为例，它会在用户的个人配置信息目录中生成一个名为Default\user stylesheets \custom.css的文件，添加到这个文件中的任何样式都会被用于用户访问的所有网站。

2.3样式如何层叠

⑴元素内嵌样式（用元素的全局属性style定义的样式）

⑵文档内嵌样式（定义在style元素中的样式）

⑶外部样式（用link元素导入的样式）

⑷用户样式（用户定义的样式）

⑸浏览器样式（浏览器应用的默认样式）

⚠️⑴⑵⑶合称作者样式，定义在用户样式表中的样式称为用户样式，浏览器定义的样式称为浏览器样式。

2.4、用重要样式表调整层叠次序

把样式属性值标记为重要（important），可以改变正常的层叠次序。

在样式声明后附上！important即可将对应属性值标记为重要，不管这种样式属性定义在什么地方，浏览器都会给予优先考虑。

⚠️能凌驾于这样定义的重要属性值之上的只有用户样式表中定义的重要属性值。对于普通属性作者样式中的值优先于用户样式中的值，而对于重要属性情况正好相反。

2.5、根据具体程度和定义次序解决同级样式冲突

如果有两条定义于同一层次的样式都能应用于同一个元素，而且它们都包含着浏览器要查看的CSS属性值，这时就要判断了。

样式的具体程度通过统计三类特征得出：

①样式的选择器中id值的数目。

②选择器中其他属性和伪类的数目。

③选择器中元素名和伪元素的数目。

<style type="text/css">
a {
color: black;
}
a.myclass {
color:white;
background:grey;
}
</style>

⚠️按照a-b-c的形式（其中每一个字母一次代表①②③三类特征的统计结果）生成一个数字（他不是一个三位数）。

如果对某个样式算出的a值最大，那么它就是具体程度高的那个。

只有a值相等时浏览器才会比较b值，此时b值较大的样式具体程度更高。

只有a值和b值都分别相等时浏览器才会考虑c值。

如果同一个样式属性出现在具体程度相当的几条样式中，那么浏览器会根据其位置的先后选择所用的值，规则是后来居上。

<style type="text/css">
a.myclass1 {
color: black;
}
a.myclass2 {
color:white;
background:grey;
}
</style>

根据样式的具体程度和定义次序确定选用的样式属性值，应该把各个属性分开考虑。

2.6、继承

如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的样式属性值。

并非所有CSS属性均可继承：与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会被继承。