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去掉和加上再看效果 就明白了