跟着视频简单过了一下CSS，感觉有好多之前自己没注意的知识，1个小时的内容也蛮多的，后续有得补充和整理了。
CSS 发展史
CSS1
- 解决网页排版布局和装饰问题
- 第一个有“层叠(casading)”概念的语言
CSS2
- 表现和内容分离
CSS 2.1
- 代替CSS2
- 对CSS2的修正、扩展
CSS 3
- 规范模块化发展
- 样式丰富、酷炫
- 提高网站的可维护性以及性能速度
有些标准的模块已经到5，6了，不过还是习惯称这个模块集合为 CSS 3。
基础知识
Casading 规则、选择器、继承、值和单位、盒模型。
样式表->规则声明的集合，集合中不可避免的会产生冲突，层叠规则就是用来解决冲突的。
层叠三大规则
- 样式表来源
- 选择器优先级
- 源码位置
以上三点的优先程度是递减的。
样式表来源
样式表来源重要排序
- 用户代理样式（浏览器默认样式）
- 用户样式表（很少有）
- 作者样式表（developer写的）
- 作者样式表中的 !important
- 用户样式表中的 !important
- 用户代理样式表中的 !important
以上的重要程度是递增的
当然实际开发中，99%以上的样式都来自作者样式表，所以看哪个样式会生效还是会去看选择器的优先级
选择器优先级
选择器有哪些?
基础选择器
#id--ID选择器。Tagname--类型选择器或者标签选择器。
class--类选择器。*--通用选择器。该选择器匹配所有元素
组合器
子组合器(>)一一匹配的目标元素是其他元素的直接后代。如：parent >.child
相邻兄弟组合器(+)--匹配的目标元素紧跟在其他元素后面。如：p +h2
通用兄弟组合器()一匹配所有跟随在指定元素之后的兄弟元元素，如：li.activeli
复合选择器多个基础选择器可以连起来使用,如：h1.page-heaader
属性选择器
通过约束属性值，div[data-title="aaa"]
伪类选择器
选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。比如：first-child,:hover
伪元素选择器
匹配在文档中没有直接对应HTML元素的特定部分,或插入内容。如h2:: first-letter,div::before
逻辑选择器
较新的选择器:is():has():where():not()
选择器优先级
优先级：内联 > id > class = attribute = pseudo-class > type = pseudo-class > type = pseudo-class > tdo-element
| a | b | c | 标记（a,b,c） | |
|---|---|---|---|---|
| ul li.red | 0 | 1 | 2 | (0,1,2) |
| #container:hover | 1 | 1 | 0 | (1,1,0) |
| 通用选择器 | 0 | 0 | 0 | (0,0,0) |
| div :is(p, #card) | 1 | 0 | 1 | (1,0,1) |
内联样式不属于选择器，为了方便比较记忆，放在这里做对比
*:is():not():has() 本身不计入优先级，以参数中最高的优先级为准，:vwhere()优先级为0
源码位置
源码顺序
The last declaration in document order wins.
- 对于@import的样式,根据@import的顺序
- 对于link和style标签的样式,根据在document中的顺序决定
由层叠概念引申出的 css 代码 good practice
选择器尽量少用id
大面积使用id，不利于样式的复用，也不利用后续覆盖。
尽量不要用 !important
会压缩扩展性和灵活性。
自己的样式加在引用库样式的后面
可以避免自己的样式被覆盖。
