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()

你可能感兴趣的:(css,html,css3)