css中選擇器的優(yōu)先級(jí)，學(xué)習(xí)web前端開(kāi)發(fā)？
謝謝邀請(qǐng)！
相對(duì)來(lái)說(shuō)，入門(mén)Web前端開(kāi)發(fā)還是比較容易的，但是僅僅是入門(mén)容易，越往后學(xué)習(xí)內(nèi)容就越多，所以學(xué)習(xí)Web前端開(kāi)發(fā)要有一個(gè)心里準(zhǔn)備，那就是前端開(kāi)發(fā)內(nèi)容多且更新快。
通常來(lái)說(shuō)，學(xué)習(xí)Web前端開(kāi)發(fā)需要的基礎(chǔ)知識(shí)并不多，簡(jiǎn)單的說(shuō)需要了解操作系統(tǒng)、計(jì)算機(jī)網(wǎng)絡(luò)以及Web的相關(guān)知識(shí)，由于Web開(kāi)發(fā)本身需要接觸更多的網(wǎng)絡(luò)知識(shí)，所以學(xué)習(xí)Web開(kāi)發(fā)之前可以先了解一下基本的網(wǎng)絡(luò)連接請(qǐng)求處理過(guò)程。
學(xué)習(xí)Web前端開(kāi)發(fā)可以先從互聯(lián)網(wǎng)整體結(jié)構(gòu)開(kāi)始了解，互聯(lián)網(wǎng)簡(jiǎn)單的說(shuō)就是網(wǎng)絡(luò)的集合，通過(guò)交換機(jī)、路由器等網(wǎng)絡(luò)設(shè)備把全世界的網(wǎng)絡(luò)連接到一起，看一個(gè)圖：
互聯(lián)網(wǎng)把各種各樣的計(jì)算機(jī)設(shè)備連接到了一起的目的是為了能夠共同協(xié)作，而共同協(xié)作的基礎(chǔ)就是能夠進(jìn)行數(shù)據(jù)交換，而數(shù)據(jù)交換的前提是要有一套完整的通信協(xié)議，通訊協(xié)議就是制定一個(gè)統(tǒng)一的交流標(biāo)準(zhǔn)。
這些基礎(chǔ)條件都具備了以后，下一步就是在互聯(lián)網(wǎng)中設(shè)置網(wǎng)絡(luò)服務(wù)，而Web服務(wù)則是最為常見(jiàn)的一種網(wǎng)絡(luò)服務(wù)，看一個(gè)簡(jiǎn)單的Web服務(wù)過(guò)程的圖示：
這個(gè)圖描述了一個(gè)非常簡(jiǎn)單的Web請(qǐng)求處理過(guò)程，圍繞這個(gè)處理過(guò)程有幾個(gè)關(guān)鍵的角色，分別是作為請(qǐng)求端的瀏覽器、作為服務(wù)端的HTML資源、請(qǐng)求對(duì)象和回應(yīng)對(duì)象，下面做一個(gè)簡(jiǎn)單的描述。
瀏覽器是Web前端開(kāi)發(fā)的呈現(xiàn)基礎(chǔ)，對(duì)于用戶(hù)來(lái)說(shuō)，瀏覽器就是一個(gè)打開(kāi)Web服務(wù)的窗戶(hù)，所有的Web服務(wù)都通過(guò)瀏覽器呈現(xiàn)給用戶(hù)。對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，瀏覽器就是前端開(kāi)發(fā)內(nèi)容的運(yùn)行環(huán)境（容器）。
存放在服務(wù)端的HTML頁(yè)面資源就是前端開(kāi)發(fā)人員要開(kāi)發(fā)的主要內(nèi)容，前端開(kāi)發(fā)就是編寫(xiě)基于HTML的一系列代碼，包括CSS、JavaScript等。這部分內(nèi)容編寫(xiě)好以后要存儲(chǔ)在服務(wù)器端，然后等待用戶(hù)的請(qǐng)求。
請(qǐng)求對(duì)象就是客戶(hù)在瀏覽器端向服務(wù)器端發(fā)出的服務(wù)請(qǐng)求，然后服務(wù)器把對(duì)應(yīng)的資源（HTML等）封裝成回應(yīng)對(duì)象發(fā)送給客戶(hù)端，然后客戶(hù)端的瀏覽器把服務(wù)端返回來(lái)的資源（HTML）呈現(xiàn)出來(lái)，一個(gè)請(qǐng)求處理過(guò)程就完成了。
這是一個(gè)非常簡(jiǎn)單的描述過(guò)程，隨著Web前端開(kāi)發(fā)的發(fā)展，目前前端開(kāi)發(fā)的方式也產(chǎn)生了較大的變革，前端技術(shù)也越來(lái)越豐富，框架也越來(lái)越多，而且前端開(kāi)發(fā)后端化也是一個(gè)趨勢(shì)，因此前端開(kāi)發(fā)需要一個(gè)系統(tǒng)的學(xué)習(xí)過(guò)程。
我做軟件開(kāi)發(fā)多年，目前也在帶軟件開(kāi)發(fā)團(tuán)隊(duì)，我會(huì)陸續(xù)在頭條寫(xiě)一些關(guān)于軟件開(kāi)發(fā)方面的文章，感興趣的朋友可以關(guān)注我，相信一定會(huì)有所收獲。
如果有軟件開(kāi)發(fā)方面的問(wèn)題，也可以咨詢(xún)我。
謝謝！
CSS選擇器權(quán)重如何計(jì)算？
很古老的話(huà)題了
id=100
class=10
tag（標(biāo)簽）=1
按照這個(gè)規(guī)律去計(jì)算，比如
#qietu div{}
100+1 = 101
.qietu .box{}
10+10=20
可以得出第一個(gè)的權(quán)重要比第二個(gè)要高。另外關(guān)于權(quán)重的擴(kuò)展知識(shí)面，我推薦了解下BEM命名規(guī)則，這個(gè)觀念很好，可以從側(cè)面杜絕權(quán)重問(wèn)題的產(chǎn)生，還有一個(gè)就是提高權(quán)重的方法 !important;
postcss和cssmodule是什么？
postcss是什么？
根據(jù)官網(wǎng)的解釋?zhuān)且环Njavascript編寫(xiě)的工具，用來(lái)轉(zhuǎn)化css的。可以認(rèn)為它是處理css的插件集合，需要配合諸如webpack、gulp等編譯工具才能展現(xiàn)它強(qiáng)大的能力。
目前社區(qū)提供了非常多的插件，比較有名的如下：
autoprefixer 可以為css的屬性配置兼容性的前綴，不需要手動(dòng)添加postcss-preset-env 允許你使用更加現(xiàn)代的css特性stylelint 檢查css語(yǔ)法錯(cuò)誤cssnano css的壓縮器等等postcss的原理如果大家了解babel的原理，那就應(yīng)該聽(tīng)說(shuō)過(guò)AST即抽象語(yǔ)法樹(shù)。編譯器將字符串進(jìn)行詞法分析、語(yǔ)法分析，再做轉(zhuǎn)換，最終達(dá)到預(yù)期的結(jié)果。postcss也是同樣的原理，這個(gè)包已經(jīng)為使用者提供了解析的方法parse，并且也提供了很多轉(zhuǎn)化的API，利用這些就可以自己開(kāi)發(fā)一款postcss插件了。
css Module是什么？先前呢，我們使用css選擇器，它是對(duì)整個(gè)頁(yè)面是有效的，也就是全局的，當(dāng)你每次迭代需求的時(shí)候，需要考慮每次添加新的css是否會(huì)影響到其他地方，所以我們有時(shí)選擇為樣式表添加命名空間。css Module為我們提供了另外一種開(kāi)發(fā)方式，它可以使css具有局部作用域。
用法如下：
用法是如此的簡(jiǎn)單，基本一看就會(huì)，css-loader為我們提供了css Module的開(kāi)關(guān)，只要為css-loader添加參數(shù)選項(xiàng)modules就可以開(kāi)啟。注意：它必須放在less或者sass的loader之前。
那它如何做到局部作用域的呢？
打開(kāi)element面板可以發(fā)現(xiàn)，它把class變成了md5戳，對(duì)應(yīng)每個(gè)組件，保持唯一。
vue的scoped由此我們聯(lián)想到vue的scoped，它也解決了css局部作用域的問(wèn)題！
它在dom上生成了一個(gè)data屬性，并且給class選擇器添加了屬性選擇器，類(lèi)似于之前的md5戳。不過(guò)由于添加了屬性選擇器，使得選擇器的優(yōu)先級(jí)變高了，想在組件外面覆蓋css屬性就變得不那么容易了！
喜歡我的回答就關(guān)注我吧，有問(wèn)題可以發(fā)表評(píng)論，我們一起學(xué)習(xí)，共同成長(zhǎng)！
css和style有什么區(qū)別？
css是外部樣式style是行內(nèi)樣式
兩都的區(qū)別css對(duì)于后期的修改比較靈活。
有效執(zhí)行順序，如果內(nèi)部寫(xiě)了style樣式的話(huà)，style為最終執(zhí)行樣式，意思就是style的優(yōu)先級(jí)高于css。
css的流行也在于它很好的做到了結(jié)構(gòu)和樣式分離，使得開(kāi)發(fā)者能就通過(guò)改變CSS樣式來(lái)達(dá)到改變頁(yè)面效果的目的。而Style是內(nèi)嵌入頁(yè)面的，維護(hù)起來(lái)不方便。所以一般的采用引入方式。