这是我参与「第四届青训营 」笔记创作活动的的第1天
我们知道网页主要是由HTML(内容)、CSS(样式)、JavaScript(行为)这三大部分组成的。HTML的作用是在网页上展示有哪些信息内容；而CSS就是给HTML元素添加各种各样的样式，让网页显示更加好看；JavaScript则是给网页添加一些行为动画等效果，使网页不再是单一的静态网页，提高网页的浏览体验。今天就说说CSS如何给页面中众多的元素添加样式的。
选择器(Selector)
选择器种类
CSS是通过选择器找出页面中的元素，以便给元素设置样式。选择器分为：
- id选择器(#标签{})
- 类选择器(.标签{})
- 伪类(标签:类{})
- 属性选择器([属性]{})
- 标签选择器(标签{})
- 通配选择器(*{})
不同选择器选择元素的方式如下所示：
选择器组合 (Combinators)
有时候需要给多种元素添加CSS样式，单个的选择器无法满足我们的要求，这时候就可以通过选择器组合来选中多个元素，组合如下：
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素，A的孩子 | section > p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且和A同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中B，如果它紧跟在A后面，A的第一个兄弟 | h2 + p |
| 选择器组 | A , B | 同时选中A和B | h1, h2, h3 |
不同选择器组合的方式如下所示：
选择器的特异度(Specificity)
选择器按照特异度从高到底分为：
！important(∞) > 行内样式(1000) > id选择器(100) > 类(伪类、属性)选择器(10) > 标签选择器(1) > (*)通配符选择器(0)
特异度计算方式
- 单个选择器时，选择器的特异度就是上面对应的值
- 组合选择器时，选择器的特异度就多个选择器的相加，例如
div .app的特异度就是10+1=11，注：这里的相加不会产生进位，例如：有11个标签选择器和一个类选择器的组合，他的特异度是10+11=1-11而不是21，特异度比较是从高位比到低位
注意： - 兄弟选择器和相邻选择器不属于单个选择器，而是属于选择器的组合，例如 A ~ B 的特异度就是A的特异度加上B的特异度
- 出现样式继承时，继承下来的特异度为0，如果该元素没有直接选中，不管父元素特异度多高，子元素得到的特异度都是0
样式作用原理
- 由于一个元素可能有多个样式，但最终渲染时只会有一个样式起作用，就是特异度最高的那一个起作用。
- 如果一个元素设置了多个特异度相同的样式，根据就近原则，会优先使用离元素最近的样式（一般是最后一个样式）
