css選擇器組合使用，熟練掌握并默寫標(biāo)記選擇器的基本語(yǔ)法？
1.標(biāo)記選擇器主要應(yīng)用在HTML頁(yè)中的標(biāo)記樣式選擇。如P選擇器就用于聲明網(wǎng)頁(yè)中有P標(biāo)記的文本內(nèi)容，同理，H1選擇器則可以標(biāo)記頁(yè)面中H1的樣式。例如： H1 { font-size:14px; font-weight:bold; color:#ccc;}以上代碼表示在所有應(yīng)用H1選擇器的地方，將文字的大小設(shè)為14像素并加粗，同時(shí)將顏色設(shè)為灰色，如果要改變H1的顏色，只需將color屬性更改就可以了，比如將color設(shè)為#e7eefe來(lái)與網(wǎng)頁(yè)的其他地方協(xié)調(diào)。 2.類別選擇器 這是一類最常用的選擇器，用它來(lái)定義網(wǎng)頁(yè)中需要特殊表現(xiàn)的樣式，類別選擇器的名稱可以由作者自由定義，一般來(lái)講類別選擇器的命名最好有一定的意義，使CSS代碼更易維護(hù)和閱讀。例如定義導(dǎo)航就可以使用.daohang{}或者是.nav{}，不要使用簡(jiǎn)略或者特殊的字符串，否則可能三天后當(dāng)你再讀你的CSS代碼時(shí)，就連你自己都搞不清一個(gè)樣式到底是做什么用的！ 類別選擇器就是CSS類，在HTML表現(xiàn)為調(diào)用的class。例如： (1)style.css文件中定義 .title { margin:10px; padding:2px 5px;}(2)HTML文件中
在上述定義中，p標(biāo)簽將引用CSS文件中的title樣式應(yīng)用到整個(gè)p覆蓋的范圍。p將顯示為一個(gè)上下左右margin各為10px，上下padding為2px，左右padding為5px的矩形。 請(qǐng)注意類別選擇器CSS定義和標(biāo)記選擇器的區(qū)別：在CSS文件中，標(biāo)記選擇器前邊沒有"."號(hào)，下面我們還會(huì)講到ID選擇器，它的定義也不一樣，每個(gè)ID選擇器樣式前有一個(gè)"#"號(hào)，以確定其為ID選擇器，而在HTML中則用ID="style"引用。值得注意的是，一個(gè)標(biāo)簽可以同時(shí)應(yīng)用多個(gè)class選擇器，如,具體大家可以在下邊思考并做下實(shí)驗(yàn)，筆者在這就不舉例了。3.ID選擇器(1)ID選擇器用法和class基本沒有區(qū)別，他們的不同之處就在于ID選擇器只能在HTML頁(yè)中使用一次，而class則可以任意多次調(diào)用，在CSS文件中，ID 選擇器一般寫成 #idname { bgcolor:#339; font-size:16px;}如果一個(gè)ID應(yīng)用于多個(gè)HTML標(biāo)記，則有可能造成IE編譯錯(cuò)誤，并且由于ID選擇器可以被JAVASCRIPT等調(diào)用，所以多個(gè)ID會(huì)導(dǎo)致JAVA編譯錯(cuò)誤并崩潰！ (2)HTML的引用 在HTML中引用ID選擇器的代碼如下所示： 并且ID選擇器不能像類別選擇器那樣同時(shí)被一個(gè)標(biāo)簽調(diào)用。這也是完全錯(cuò)誤的語(yǔ)法。 復(fù)合選擇器就是基本選擇器通過不同的鏈接方式構(gòu)成的。 復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器，通過不同方式鏈接而成的選擇器。
css樣式語(yǔ)法？
css的樣式語(yǔ)法是：
1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；
2、選擇器通常是需要改變樣式的HTML元素；
3、每條聲明由一個(gè)屬性和一個(gè)值組成；
4、屬性和屬性值被冒號(hào)分隔開。css樣式語(yǔ)法規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
是什么選擇器？
head img 選擇器：就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器。
CSS的選擇器分為兩大類：基本選擇題和擴(kuò)展選擇器。
基本選擇器：
標(biāo)簽選擇器：針對(duì)一類標(biāo)簽ID選擇器：針對(duì)某一個(gè)特定的標(biāo)簽使用
類選擇器：針對(duì)你想要的所有標(biāo)簽使用
通用選擇器（通配符）：針對(duì)所有的標(biāo)簽都適用（不建議使用）
postcss和cssmodule是什么？
postcss是什么？
根據(jù)官網(wǎng)的解釋，它是一種javascript編寫的工具，用來(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)該聽說過AST即抽象語(yǔ)法樹。編譯器將字符串進(jìn)行詞法分析、語(yǔ)法分析，再做轉(zhuǎn)換，最終達(dá)到預(yù)期的結(jié)果。postcss也是同樣的原理，這個(gè)包已經(jīng)為使用者提供了解析的方法parse，并且也提供了很多轉(zhuǎn)化的API，利用這些就可以自己開發(fā)一款postcss插件了。
css Module是什么？先前呢，我們使用css選擇器，它是對(duì)整個(gè)頁(yè)面是有效的，也就是全局的，當(dāng)你每次迭代需求的時(shí)候，需要考慮每次添加新的css是否會(huì)影響到其他地方，所以我們有時(shí)選擇為樣式表添加命名空間。css Module為我們提供了另外一種開發(fā)方式，它可以使css具有局部作用域。
用法如下：
用法是如此的簡(jiǎn)單，基本一看就會(huì)，css-loader為我們提供了css Module的開關(guān)，只要為css-loader添加參數(shù)選項(xiàng)modules就可以開啟。注意：它必須放在less或者sass的loader之前。
那它如何做到局部作用域的呢？
打開element面板可以發(fā)現(xiàn)，它把class變成了md5戳，對(duì)應(yīng)每個(gè)組件，保持唯一。
vue的scoped由此我們聯(lián)想到vue的scoped，它也解決了css局部作用域的問題！
它在dom上生成了一個(gè)data屬性，并且給class選擇器添加了屬性選擇器，類似于之前的md5戳。不過由于添加了屬性選擇器，使得選擇器的優(yōu)先級(jí)變高了，想在組件外面覆蓋css屬性就變得不那么容易了！
喜歡我的回答就關(guān)注我吧，有問題可以發(fā)表評(píng)論，我們一起學(xué)習(xí)，共同成長(zhǎng)！