01 CSS选择器的特异度

<h1 class="title">拉森火山国家公园</h1>
</article>

<style>
  .title {
    color: blue;
  }
  
  article h1 {
    color: red;
  }
</style>

哪条规则生效涉及到选择器的优先级问题，根据选择器的特异度，所谓特异度就是选择器的特殊程度。越特殊的选择器，它的优先级会更高。

特异度计算方法：

1个id，2 个（伪）类，2 个标签，特异度为122

0个id，2 个（伪）类，2 个标签，特异度为22

02 CSS继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

一般在CSS里，和文字相关的一些属性都是可以继承的，但是跟盒模型相关的一些属性都是不可继承的。

HTML和CSS具体是怎样发生关系的，也就是说一个元素，它的样式是怎么样被计算出来的，这里涉及到CSS的求值过程。浏览器拿到HTML后会进行解析，会把其解析为DOM树，在解析过程中会发现一些样式规则。浏览器为了布局或渲染页面，需要遍历页面上每一个元素对应的的每一个CSS属性的值，

filtering：对应用到该页面的规则用以下条件进行筛选：选择器匹配、属性有效、符合当前 media 等。
- 声明值（Declared Values）：一个元素的某属性可能有0到多个声明值。
cascading：按照来源、!important 、选择器特异性、书写顺序等选择出优先级最高的一个属性值（即层叠值）。
- 层叠值（Cascaded Value）：在层叠过程中，赢得优先级比赛的那个值。
defaulting：当层叠值为空的时候，使用继承或初始值（默认值策略）。总之经过这一步骤之后，一定能够得到有且只有一个且不为空的值即指定值。
- 指定值（Specified Value）：经过cascading和defaulting后，保证指定值一定不为空。
resolving：将一些相对值或者关键字转化为绝对值，比如 em 转化为 px，相对路径转化为绝对路径。
- 计算值（Computed Value）：一般来说，浏览器会在不进行实际布局的情况下，所能得到的最具体的值。
formatting：将计算值进一步转换，比如关键字、百分比等都转为绝对值。
- 使用值（Used Value）：进行实际布局时使用的值，不会再用绝对值和关键字。
constraining：将小数像素值转化为整数。
- 实际值：渲染时实际生效的值。

目前我还不是很熟悉CSS的相关知识，在学习字节内部课程的过程中同时也在另外学习相关基础知识，CSS 新特性还在不断出现，要养成学习的习惯，持续学习，保持好奇心，善用浏览器的开发者工具，充分利用 MDN 和 M3C CSS 规范。