前言
这是我参与「第四届青训营」笔记创作活动的的第2天
CSS的基本概念
CSS是Cascading Style Sheet的缩写，用来控制页面显示内容的样式。
CSS的组成
h1 {
color: white;
font-size: 14px;
}
以上是一段简单的css，h1是选择器（selector），用来选择元素赋予样式。color和font-size是property，说明对元素的哪方面的样式做出改变。white和14px是属性值，为property赋值。像font-size: 14px这样的一条语句，叫做一条声明。而这段代码整体，包括选择器，样式选择，属性值，称为一条规则。
CSS的使用
我们可以如何在页面中使用css？
- 外链：
<link rel="stylesheet" href="xx"> - 嵌入：
<style>xxx</style> - 内联：
<p style="xx"></p>
对于第三条内联，一般是不选择使用的。这是在html内写css，这样的做法明显把代码的责任复杂化，使得代码的可维护性变差，当我们要修改一个样式，我们要在一堆html代码中寻找。 在我们的组件化思想中，会使用第二种嵌入的方式，将一个组件的代码写在一起。
CSS渲染
我们写好的CSS样式是如何渲染到页面上的呢？
CSS的编写
CSS选择器
要给元素添加样式，首先，我们需要选择元素，那么我们如何选择元素呢？我们要使用选择器。
- 通配选择器： *
* { padding: 10px; }
- 标签
h1 { font-size: 30px; }
- id
#header { font-weight: 800 }
- class
.button { cursor: pointer }
- 属性
[disabled] { color: grey } // 只要元素有这个属性就会被选中
a[href^="#"] // 匹配a标签下以#开头的href属性
a[href$=".jpg"] // 匹配a标签下以.jpg结尾的href属性
- 伪类
a:hover // 鼠标浮动在a标签上时出现的样式
选择器的特异度
看上面的选择器，选择的范围都是不一样的，有没有一种可能，我们两个不同的选择器选择到同一个元素呢？答案是肯定会的。
那么这时候又出现了一个问题，如果我这两条规则设置了同一个属性，但是赋予了不同的属性值，这个元素会显示什么样式呢？
这里就要用到我们选择器的特异度，先说答案：元素会显示特异度大的样式。
我们将元素选择器分为三个维度，可以代表成0-0-0
- 每出现一个id选择器，特异度增加1-0-0
- 每出现一个class，伪类，属性选择器，特异度增加0-1-0
- 每出现一个标签，伪元素选择器，特异度增加0-0-1
For example:
CSS的组合
为了使我们选择的元素更加具体，我们会组合使用选择器。
| 组合 | 组合格式 | 满足条件 |
|---|---|---|
| 直接组合 | AB | 同时满足A和B |
| 后代组合 | A B | 如果B是A的子孙，选中B |
| 亲子组合 | A>B | 如果B是A的子元素，选中B |
| 兄弟选择器 | A~B | 如果B在A后且与A同级，选中B |
| 相邻选择器 | A+B | 如果B紧跟A后面，选中B |
