CSS(Cascading Style Sheets)层叠样式表
用来描述 HTML、XML 等文档的呈现
加载方式
link：html 标签，可以用来加载 css，也可以定义 RSS、rel 等属性，页面加载的时候 link 会同时被加载，权重高于@import
@import：css 提供一种方式，只能加载 css，页面加载完成之后加载，IE5+支持
<link href="blue.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(blue.css);
</style>
选择器类型
- 类型选择器：
h1 {} - 通配符选择器：
* {} - 类选择器：
.class {} - ID 选择器：
#id {} - 标签属性选择器：
a[title] {} - 伪类选择器：
p:first-child {}，处于特定状态的元素，例如首个元素、鼠标 hover 状态等 - 伪元素选择器：
p::first {}，不存在与文档流中的元素，例如：::after - 后代选择器：
article p {} - 子代选择器：
article > p {} - 兄弟选择器：
h1 ~ p {} - 相邻兄弟选择器：
h1 + p {}
选择器优先级
哪些样式会最终生效主要由量方面来绝对，首先是样式引入方式，内联样式会覆盖选择器样式，选择器样式和选择器的权重有关，以下为从高到低分类：
- 第一级：ID 选择器
- 第二级：类选取、属性选择器、伪类
- 第三级：类型选择器、伪元素
两个嵌套选择器会按照优先级从高到低比较，每一级的量级为对应类型选取的数量，如果当前等级的量级一样则会对比下一量级，如果全部相等则后面的会覆盖前面的，权重计算例子：
#nav-global > ul > li > a.nav-link：一级为1,二级为1,三级为3
优先级特殊处理，可以使用!important提升某个样式的优先级，使用!important修饰的样式可以覆盖内敛样式，例：
.title {
color: #0f0!important;
}
注意：CSS 选择器匹配是反向的(从右到左)，应该避免层级过多