css peek是一款插件，使用CSS Peek插件,你可以追蹤至樣式表中 CSS 類和ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí),選擇“ Go to Definition 和 Peek definition ”選項(xiàng),它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼。
希望我的回答能夠?qū)δ阌兴鶐椭?/p>
網(wǎng)頁(yè)前端開發(fā)工程師就是與網(wǎng)頁(yè)打交到。下面幾個(gè)技能是必備的。
HTML寫網(wǎng)頁(yè)怎么離得開html，html也叫超文本標(biāo)記語(yǔ)言，它包括很多標(biāo)簽。通過標(biāo)簽對(duì)文字，圖片，聲音，視屏等網(wǎng)頁(yè)元素進(jìn)行格式化處理。html就是網(wǎng)頁(yè)的基礎(chǔ)。
CSSCSS是層疊樣式表的英文簡(jiǎn)稱，CSS能夠?qū)W(wǎng)頁(yè)的元素的位置進(jìn)行排版，那些漂亮的網(wǎng)頁(yè)就是用CSS進(jìn)行排版的，什么元素在什么位置都是通過CSS進(jìn)行處理的，部分網(wǎng)頁(yè)的動(dòng)態(tài)效果也是用css實(shí)現(xiàn)的，常見的loading樣式，鼠標(biāo)進(jìn)入圖片放大等效果都可以用CSS實(shí)現(xiàn)。網(wǎng)頁(yè)的布局離不開CSS。
JavascriptJavaScript簡(jiǎn)稱js，是一款解釋型腳本語(yǔ)言，它對(duì)網(wǎng)頁(yè)的作用就是處理用戶事件的，比如網(wǎng)頁(yè)的元素被點(diǎn)擊后有什么效果，就需要利用js進(jìn)行事件綁定。比如登錄界面，用戶輸入賬號(hào)密碼后點(diǎn)擊登錄。js就會(huì)處理這些事件，去訪問后臺(tái)拿到結(jié)果后判斷是否登錄成功?？傊琷s就是處理事件的。
前端框架前端框架就是對(duì)js的二次封裝，把常用的功能封裝起來，提高開發(fā)者的開發(fā)效率。
常見的前端框架有jquery：獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和簡(jiǎn)潔的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展。
Bootstrap：讓頁(yè)面更加簡(jiǎn)潔、直觀。是移動(dòng)設(shè)備優(yōu)秀的前端開發(fā)框架,讓網(wǎng)頁(yè)開發(fā)更迅速、更簡(jiǎn)單。它還提供了優(yōu)雅的HTML和CSS規(guī)范，有著豐富的網(wǎng)格布局系統(tǒng)以及大量的可重用組件，還支持JavaScript、jQuery插件以及組件定制等。
AngularJS：有很多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。
Vue：Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
調(diào)試工具網(wǎng)頁(yè)寫好了，總是要看看效果的，這個(gè)時(shí)候調(diào)試工具是必要的，一般都是用瀏覽器進(jìn)行調(diào)試，chrome，F(xiàn)irefox等主流瀏覽器的網(wǎng)頁(yè)調(diào)試方法都要會(huì)。
以上都學(xué)會(huì)了，就需要項(xiàng)目進(jìn)行實(shí)戰(zhàn)了。
postcss是什么？
根據(jù)官網(wǎng)的解釋，它是一種javascript編寫的工具，用來轉(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)！
.content[data-role=page]:nth-child(2){} 使用:first-child偽類時(shí)一定要保證前面沒有兄弟節(jié)點(diǎn)，你前面有個(gè)content所以會(huì)失效
1
2
3
你把這里的span去掉和加上再看效果 就明白了