前端进阶

前端技能模型

领域知识 （实践中学习）

前端知识（建立知识体系）

编程能力-架构能力-工程能力（多接项目）

css选择器优先级

 div.container  a.x#y{

}
[2,2,1,0]   
//由高位比较 高位最后
body div a.x#y{

}
[3,1,1,0]
<div class="container">
<a class="x" id="y" style="color:blue"> 

伪类

树结构选择器
:empty
:nth-child()
:nth-last-child() //需要回溯的
:first-child   :last-child  :only-child  //需要回溯的
逻辑型选择器
:not 伪类
where :has

伪元素
::before
::after
::firstLine
::firstletter

css-crawler 只执行一次 爬虫

let iframe = document.createElement('iframe')
document.body.innerHTML = ""
document.body.appendChild(iframe);
function happen(element,event){
    return new Promise(function(resolve){
        let handler = () => {
            resolve();
            element.removeEventListener(event,handler)
        }
        element.addEventListener(event,handler)
    })
}
iframe.src = "https://w3.org/TR/2020/WD-css-postion-3-20200519/"
void sync function (){
  for(let standard of standards){
    iframe.src = standard.url
    console.log(standard.name)
    await happen(iframe,"load")
  }
}