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样式，如

• ID选择器，如#id{…}
• 类选择器，如.class{…}
• 属性选择器，如 input[type="email"]{…}
• 伪类选择器，如a:hover{…}
• 伪元素选择器，如 p::before{…}
• 标签选择器，如 input{…}
• 通配选择器，如 *{…}

选择器的权重定义

把特殊性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。

4个等级的定义如下：

• 第一等级：代表内联样式，如style=""，权值为 1000
• 第二等级：代表id选择器，如#content，权值为100
• 第三等级：代表类，伪类和属性选择器，如.content，权值为10
• 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
  注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0。

权重的优先级

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

async和await

定义

• async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；
• await 用于等待一个异步方法执行完成；
• async/await的作用就是使异步操作以同步的方式去执行

注意

• await必须写在async函数中, 但async函数中可以没有await
• 如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理

关于async

语法

 async function timeout() {
     return 'hello world!'
 }

他的调用会返回一个promise对象。
async 函数也是函数，直接加括号调用就可以，为了表示它没有阻塞它后面代码的执行，我们在async 函数调用之后加一句console.log;

 async function timeout() {
     return 'hello world!'
 }
 timeout()
 console.log('我虽然在后面，但是先执行')

打印结果:

若要想获取到async 函数的执行结果，就要调用promise的then 或 catch 来给它注册回调函数

  async function timeout() {
      return 'hello world!'
    }
    timeout().then(val => {
      console.log(val)
    })
    console.log('我虽然在后面，但是先执行')

打印结果:

await

作用 :
await关键字只能放到async函数里面，await是等待的意思，其实await不仅仅用于等Promise对象，还可以等任意表达式，所以await后面实际是可以接普通函数调用或者直接量的，不过我们更多的是放一个返回promise 对象的表达式。他等待的是promise对象执行完毕，并返回结果。
例如

    function getSomething () {
      return 'something'
    }
    async function testAsync () {
      return Promise.resolve('hello async')
    }
    async function test () {
      const v1 = await getSomething()
      const v2 = await testAsync()
      console.log(v1, v2)
    }
    test()