这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
CSS是什么？
Cascading Style Sheets
层叠样式表
选择器 属性名 属性值（后两个合起来为声明）
选择器就是选中html的某个标签（元素），为其定义样式
css由这一条条的样式规则组成
在页面引入css的三种方式
推荐第一种（外链引入），内容和样式的分离，功能上的分工
开发范式上：组件式的开发
做到关注点分离
css是怎么应用到样式里面的？
每个dom树节点解析出它的css样式，得到渲染树（每个节点位置在哪里，其中每个属性的样式），最后渲染成完整的页面。
html与css有单独解析的过程，通过dom树把解析出的css附加到dom树上。
选择器
通配选择器
（*为选择所有）
* { color: red; font-size: 20px; }标签选择器
a {}
类选择器
.done{}
id选择器
注：id为唯一值
#logo {}
属性选择器
[disabled]{}
input[type="password"]
a[href^="el"] {}
选中href属性值以el为开头的元素
a[href$=".jpg"] {}
选中href属性值以.jpg为结尾的元素
伪类
（不基于标签和属性定位元素）
状态性伪类
某个元素只有在处于某种状态才会被选中
我们可以用伪类选择器选择不同链接所处的状态，给不同状态下的链接定义样式。
以上是链接的四种状态
link 默认样式
active 鼠标按下去那刻的样式
focus 聚焦状态（按下去之后的状态） 2像素橙色边框
若冒号前面没有，则默认给所有标签的这个状态定义样式
结构性伪类
根据dom节点在dom树出现的位置来决定是否选中该元素
可以通过元素在父级节点的相对位置来选中节点
li:first-child li父级的第一个节点
还有更复杂的：可以通过父级/同级的某个类型的标签指定，可以写表达式指定是基数/偶数/3的倍数的标签去赋予样式。
组合
可以通过组合的方式把标签放在一块：
直接的组合（标签+类 选择器）
input.error 可以看到只对输入框生效
