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