知识点梳理
选择器优先级
选择器优先级决定了在多个选择器应用于同一个元素时，哪个样式规则将被应用。优先级是根据选择器的特异度和重要性来计算的。
特异度是根据不同类型的选择器的数量来计算的，越特异的选择器优先级越高。一般来说，特异度的计算是基于以下规则：
- ID选择器的特异度为100，类/属性选择器的特异度为10，标签选择器的特异度为1。
- 在特异度相同时，后面出现的选择器具有更高的优先级。
/* 例子中的选择器特异度计算 */
/* 第一个选择器：1标签 + 0类 + 1标签 = 2 */
article h1.title {
color: blue;
}
/* 第二个选择器：0标签 + 2类 + 2标签 = 4 */
p.article .key {
color: green;
}
继承与显式继承
CSS中的某些属性是可继承的，意味着子元素会继承父元素的属性值，除非子元素上显式设置了相同的属性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 20px;
color: blue;
}
em {
color: red; /* 显式设置颜色 */
}
</style>
</head>
<body>
<p>This is a <em>red</em> text with <strong>blue</strong> color.</p>
</body>
</html>
CSS属性求值过程
CSS属性的求值过程涉及多个阶段，包括：
- 选择器匹配阶段：浏览器根据选择器匹配元素，并找到适用的样式规则。
- 计算声明值（Declared Value）：考虑选择器优先级、important规则等，得到一组声明值。
- 层叠值（Cascaded Value）：从上述声明值中选取具有最高优先级的值。
- 计算值（Computed Value）：对于相对单位（如em、rem），根据父元素的字体大小进行计算，得到计算值。
- 格式化值（Formatted Value）：将计算值转化为适当格式，例如添加单位。
- 最终渲染：浏览器使用格式化值来渲染页面。
理解感受
看起来简单的CSS实际上包含了许多复杂的规则和机制。虽然最初接触时可能只涉及到基本的样式设置，但深入了解CSS的过程会让人意识到其复杂性和多样性。
