CSS基础和选择器

CSS

基础

浏览器渲染流程

1. 浏览器开始解析目标HTML文件，执行流的顺序为自上而下。
2. HTML解析器将HTML结构转换为基础的DOM(文档对象模型)，构建DOM树完成后，触发DomContendLoaded事件。
3. CSS解析器将CSS解析为CSSOM(层叠样式表对象模型)，一棵仅含有样式信息的树。
4. CSSOM和DOM开始合并构成渲染树（render Tree），每个节点开始包含具体的样式信息。浏览器就是根据render tree来绘制页面的
5. 计算渲染树中个各个节点的位置信息，即布局阶段。
6. 将布局后的渲染树显示到界面上。

css阻塞渲染

• 根据浏览器的流程，当CSSOM还没构建完成时，页面是不会渲染到浏览器界面的，这也是为什么当CSS下载过慢时，会出现白屏的现象
• CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕

重绘重排

重排和重绘是DOM编程中耗能的主要原因之一：

• 重排（回流）：当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排，完成重排以后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。

  重排的情况:

  • 添加或者删除可见的DOM元素
  • 元素位置改变
  • 元素尺寸改变
  • 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
  • 页面渲染初始化（无法避免）
  • 浏览器窗口尺寸改变

• 重绘：当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘。

• 重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

link引入和@import引入的对比

1. 功能范围不同 link属于html标签 @import只是css提供的引入css的功能
2. 加载顺序不同 页面在加载的时候，link引入的css会同时被加载 @import引入的css只有等页面全部下载完成以后才进行加载，所以可能会出现闪烁
3. 兼容性 link所有浏览器都支持 @import低版本ie不支持
4. 使用JS控制样式 JS只能控制link标签 @import是不能够被JS控制的

选择器

id选择器

我们可以给元素设置id属性，然后通过 #+id属性值 的方式来选择这个元素

类选择器

1. 可以给不同的元素，进行分组。

   所有类名相等的元素，是一组的，可以进行控制样式

2. 给要被分组的元素设置class属性

   选择器中使用.+ class属性值 来选择元素

3. 类不一定多个元素，也可以是一个元素

4. 一个class可以设置多个类名，但是只能有一个class属性

   一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名

标签名选择器

• 通过标签名来选择元素
• 会选择页面中所有的这个标签的元素

通配符（*）

• 通配符使用星号*表示，意思是“所有的”。
• 在CSS中，同样使用*代表所有的标签或元素，它叫做通配符选择器。
• 不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器

!important 规则

• !important，作用是提高指定样式规则的应用优先权（优先级）。
• 语法格式**{ cssRule !important }**，即写在定义的最后面，例如：box{color:red !important;}。
• 使该条样式属性声明具有最高优先级

多个样式来源的优先级确定

• !important > 行内书写 > id > 类 > 标签名 > 通配符 > 继承
• !important > 行内书写 > id > 类 > 标签名 > 通配符 > 默认
• 样式继承不是一个默认行为，实际上而是看某一个属性的默认值是否是inherit。所以不比较继承和默认的优先级

复杂选择器

后代选择器

后代选择器使用空格间隔开 （A B：在A元素中寻找后代（不一定是子元素）是B的元素）

子代选择器

子代选择器使用 > 间隔开 （A>B：在A元素中寻找儿子辈元素 是B的元素）

相邻兄弟选择器

相邻兄弟选择器使用 + 间隔开 （A+B：在A元素的下边紧贴着A的元素 并且是B 才能被选中）

通用兄弟选择器

相邻兄弟选择器使用 ~ 间隔开 （A~B：在A元素的下边兄弟元素 并且是B 就能被选中）

群组选择器

• 将多个选择器使用 ， 隔开 可以同时对多个选择器设置样式
• 如果多个元素有相同的样式，方法有两种
  • 使用一个共同的类名
  • 使用群组选择器

交集选择器

• “交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
• 其中第一必须是标签名选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写

.list li.active{
      background-color: skyblue;
}

选择器的优先级

相同优先级的选择器生效方式

• 当优先级相同的时候，在后边书写的样式优先级高
• link元素 其实也是把样式关联上，选择器优先级相同的情况写，后写的生效

选择器优先级的权重计算

• 行内样式： 1000
• id：100
• 类：10
• 标签名：1