css選擇器優先級菜鳥工具，css派生選擇器有幾種？
基本選擇器
1.標簽選擇器：直接用元素的標簽來進行選擇
span { // 直接選擇span標簽
size:16px;
}
1
2
3
1
2
3
2.ID選擇器：通過設置id名字，進行精確的選擇，用#來定義
# div1 { //通過id名字來進行選擇
color:red;
}
<div id="div1">1</div>
1
2
3
4
1
2
3
4
3.類選擇器:通過類名來進行選擇，選擇范圍比id選擇器大，用’.'來定義
.div1 { //所有類名為div1的都被選擇了
color:red;
}
<div id="div1">1</div>
<div id="div1">1</div>
<div id="div1">1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符選擇器：范圍更大，作用于所有標簽，用*來定義
不建議使用，對頁面加載負擔大
高級選擇器
1.后代選擇器：定義用空格隔開
div span { //選擇的是div標簽下的span標簽，當然后代顧名思義可以不止隔一代，可以隔多代進行選擇
color：red；
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集選擇器：與后代選擇器定義的不同是，沒有空格隔開，兩個元素緊挨著
span#a1 { //選擇的是兩個條件1.既是span標簽的 2.id名是a1的元素，兩個條件缺一不可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集選擇器：定義用逗號隔開
span，#a1 { //選擇的是1.是span標簽的 2.id名是a1的元素，兩個條件滿足一個即可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.偽類選擇器：
1.靜態偽類：點擊連接之前（link），點擊連接之后(visited)這樣的
2.動態偽類：鼠標移入（hover），點擊之后（focus）
css文件夾里放什么？
瀏覽器解析html文檔是自上而下的，如果將CSS放在底部，頁面可以逐步呈現，但在CSS下載并解析完畢后，已經呈現的文字和圖片就要需要根據新的樣式重繪，這是一種不好的用戶體驗。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css文件應該放在HTML頂部的head中。
why?
link標簽里面的href(HyperText reference)屬性表示超文本引用，當CSS使用href引用，瀏覽器會識別該文檔為CSS，并行下載，不會停止對當前文檔的加載，在加載html生成DOM tree的時候，就可以同時對DOM tree進行渲染，這樣可以防止閃跳，白屏或者布局混亂。
最理想的情況，我們希望瀏覽器逐漸的渲染下載好的CSS，將頁面逐漸的展現給用戶。但是瀏覽器為了避免樣式變化時重新渲染繪制頁面元素，會阻塞內容逐步呈現，瀏覽器等待所有樣式加載完成之后才一次性渲染呈現頁面。
CSS文件如果放置底部，瀏覽器阻止內容逐步呈現，瀏覽器在等待最后一個css文件下載完成的過程中，就出現了“白屏”(新打開連接時為白屏，爾后先出現文字，圖片，樣式最后出現)。這點非常嚴重，因為在網速非常慢的情況下，css下載時間比較長，這樣就給用戶帶來“白屏”的時間自然也就很長了，用戶體驗非常差。
CSS文件放在頂部一方面是因為放置順序決定了下載的優先級，更關鍵的是瀏覽器的渲染機制。
css在加載過程中不會影響到DOM樹的生成，但是會影響到Render樹的生成，進而影響到layout，所以一般來說，style的link標簽需要盡量放在head里面，因為在解析DOM樹的時候是自上而下的，而css樣式又是通過異步加載的，這樣的話，解析DOM樹下的body節點和加載css樣式能盡可能的并行，加快Render樹的生成的速度。
將CSS放在底部，頁面可以逐步呈現，但在CSS下載并解析完畢后，已經呈現的文字和圖片就要需要根據新的樣式重繪，這是一種不好的用戶體驗。
postcss和cssmodule是什么？
postcss是什么？
根據官網的解釋，它是一種javascript編寫的工具，用來轉化css的。可以認為它是處理css的插件集合，需要配合諸如webpack、gulp等編譯工具才能展現它強大的能力。
目前社區提供了非常多的插件，比較有名的如下：
autoprefixer 可以為css的屬性配置兼容性的前綴，不需要手動添加postcss-preset-env 允許你使用更加現代的css特性stylelint 檢查css語法錯誤cssnano css的壓縮器等等postcss的原理如果大家了解babel的原理，那就應該聽說過AST即抽象語法樹。編譯器將字符串進行詞法分析、語法分析，再做轉換，最終達到預期的結果。postcss也是同樣的原理，這個包已經為使用者提供了解析的方法parse，并且也提供了很多轉化的API，利用這些就可以自己開發一款postcss插件了。
css Module是什么？先前呢，我們使用css選擇器，它是對整個頁面是有效的，也就是全局的，當你每次迭代需求的時候，需要考慮每次添加新的css是否會影響到其他地方，所以我們有時選擇為樣式表添加命名空間。css Module為我們提供了另外一種開發方式，它可以使css具有局部作用域。
用法如下：
用法是如此的簡單，基本一看就會，css-loader為我們提供了css Module的開關，只要為css-loader添加參數選項modules就可以開啟。注意：它必須放在less或者sass的loader之前。
那它如何做到局部作用域的呢？
打開element面板可以發現，它把class變成了md5戳，對應每個組件，保持唯一。
vue的scoped由此我們聯想到vue的scoped，它也解決了css局部作用域的問題！
它在dom上生成了一個data屬性，并且給class選擇器添加了屬性選擇器，類似于之前的md5戳。不過由于添加了屬性選擇器，使得選擇器的優先級變高了，想在組件外面覆蓋css屬性就變得不那么容易了！
喜歡我的回答就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
CSS優先級算法如何計算？
css 最常用的選擇符是類，即class,還有就是id 和元素，其次有通配符*還有一些偽類和偽元素。
子元素可以繼承父元素的屬性值。
優先級的話，id > class ＞元素＞偽類和偽元素。! important 優先級最高，但不常用。還有一種是.id > .class 要大于. class, 既優先權可以累加