这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
选择器的特异度
如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。 将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。
权重排行（高到低）
1、行内样式
（!important）
2、ID选择器
#id
2、class选择器
#id
4、类型和伪元素选择器
div, ::before
块级元素和行级元素的区别
块级
- 不和其他块级元素并列摆放
- 适用所有的盒模型属性
行级
- 和其他行级盒子放在一行或者拆开成多行
- 盒模型中的width、height不适用
CSS求值过程
首先
浏览器会解析html为DOM树，并且加载所有样式
filtering阶段
浏览器会先警告filtering阶段，对页面中每个元素找到可以匹配到该元素的所有有效值
当前阶段会筛选出所有的明确值，同时保留多个声明值待后续流程来处理。
p { font-size: 16px; }
p.text { font-size: 1.2em; }
例如上述两个属性值冲突，但是在此阶段都会保留。
cascading阶段
在cascading根据权重计算 选择出权重最高的一个属性
defulting阶段
在此阶段中，浏览器为没有声明值的属性制定一个确切的值，此阶段执行后保证指定值不为空。但是指定还不一定能直接渲染，例如font-size: 1.2em
resolving阶段
在此阶段中，将一些相对值（比如em，%）或者关键字（inherit,initial）转化成为绝对值，也包括相对路径转化为绝对路径。
在该流程结束后，所有值转化为在不进行实际布局的情况下所能获得最具体的值，同时也意味着对于 width: 100% 这样的属性依旧保留百分比，留待后续流程转化为绝对值。
formatting阶段
在此阶段中，将剩余的相对值转为为绝对值。（此流程结束之后，所有的计算值全部转化为绝对值了）
constraining阶段
在此阶段中，将小数值转化为近似整数用于实际渲染
以上步骤我们就看到了css效果了
最后学习css的建议：
- 善于查看文档 MDN 和 W3C 规范
- 保存好奇心，善用开发者工具
- 持续学习
总结
此笔记我只记录了一些我认为比较重要的知识点，求值过程中有很多小细节需要去深挖，也再一次感谢青训营的课程，让我巩固了知识，也很感谢一些大佬在网上的分享。
