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个等级,每一个等级代表一类选择器,每个等级的值相加得出选择器的权重。
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()