css优先级和async/await

css的六大优先级

  • 第一优先级:无条件优先的属性只需要在属性后面使用**!important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
  • 第二优先级:在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。
  • 第三优先级:由一个或多个id选择器来定义。例如,#id{margin:0;}会覆盖.classname{margin:3pxl}
  • 第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
  • 第五优先级:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}
  • 第六优先级:通配选择器,如*{marigin:6px;}
     

css优先级 的 优先顺序 

Inline style(内联样式) > Internal style sheet(内部样式) > External style sheet(外部样式)

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器
 

  •  内联样式:写在标签属性style的样式,如 <p style="color=red">
  • ID选择器,如#id{…}
  • 类选择器,如 .class{…}
  • 属性选择器,如 input[type="email"]{…}
  • 伪类选择器,如a:hover{…}
  • 伪元素选择器,如 p::before{…}
  • 标签选择器,如 input{…}
  • 通配选择器,如 *{…}
     

权重 的 4个等级定义 

  • 第一等级:代表内联样式,如style="",权值为 1000
  • 第二等级:代表id选择器,如#content,权值为100
  • 第三等级:代表类,伪类和属性选择器,如.content,权值为10
  • 第四等级:代表标签选择器和伪元素选择器,如div p,权值为1

注意:通用选择器(*),子选择器(>),和相邻同胞选择器(+)并不在这个等级中,所以他们的权值为0。

权重 的 优先顺序

行内样式(1000)>ID选择器(100)>类选择器(10)>标签选择器(1)>通用选择器(0)

利用权重值比较优先级 

  1. 权重值越大,优先级越高

  2. 选择器选择的范围越小越精确,优先级越高

async/await是什么? 

简而言之, async用于申明一个function是异步的;
而await则可以认为是 async await的简写形式,是等待一个异步方法执
行完成的。

async和await的基础使用

async/awiat的使用规则:

  • async 表示这是一个async函数, await只能用在async函数里面,不能单独使用
  • async 返回的是一个Promise对象,await就是等待这个promise的返回结果后,再继续执行
  • await 等待的是一个Promise对象,后面必须跟一个Promise对象,但是不必写then(),直接就可以得到返回值

async/await的特点 

1、Async作为关键字放在函数前面,普通函数变成了异步函数
2、异步函数async函数调用,跟普通函数调用方式一样。在一个函数前面加上async,变成 async函数,异步函数,return:1,打印返回值,
3、返回的是promise成功的对象,
4、Async函数配合await关键字使用
 

使用场景

async主要来处理异步的操作,
需求:执行第一步,将执行第一步的结果返回给第二步使用。在ajax中先拿到一个接口的返回数据,后使用第一部返回的数据执行第二步操作的接口调用,达到异步操作。 

async/await的优点

  1. 方便级联调用:即调用依次发生的场景;
  2. 同步代码编写方式:Promise使用then函数进行链式调用,一直点点点,是一种从左向右的横向写法;async/await从上到下,顺序执行,就像写同步代码一样,更符合代码编写习惯;
  3. 多个参数传递:Promise的then函数只能传递一个参数,虽然可以通过包装成对象来传递多个参数,但是会导致传递冗余信息,频繁的解析又重新组合参数,比较麻烦;async/await没有这个限制,可以当做普通的局部变量来处理,用let或者const定义的块级变量想怎么用就怎么用,想定义几个就定义几个,完全没有限制,也没有冗余工作;
  4. 同步代码和异步代码可以一起编写:使用Promise的时候最好将同步代码和异步代码放在不同的then节点中,这样结构更加清晰;async/await整个书写习惯都是同步的,不需要纠结同步和异步的区别,当然,异步过程需要包装成一个Promise对象放在await关键字后面;
  5. 基于协程:Promise是根据函数式编程的范式,对异步过程进行了一层封装,async/await基于协程的机制,是真正的“保存上下文,控制权切换……控制权恢复,取回上下文”这种机制,是对异步过程更精确的一种描述;
  6. async/await是对Promise的优化:async/await是基于Promise的,是进一步的一种优化,不过在写代码时,Promise本身的API出现得很少,很接近同步代码的写法

猜你喜欢

转载自blog.csdn.net/PCthedream/article/details/129898920