本文摘自PHP中文网，作者藏色散人，侵删。
chrome开发者工具查看css代码的方法：首先打开调试工具，并点击调试工具左上角的检查元素按钮；然后在styles选项卡中，单击CSS规则旁边的链接，并打开定义规则的外部样式表；最后查看样式的源文件即可。
推荐：《css视频教程》
chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它，这里总结了一些常用的CSS调试操作。
查看CSS
查看元素对应的样式
1、打开调试工具，点击调试工具左上角的检查元素按钮或者快捷键（Ctrl/Cmd + Shift + C）
2、在页面选中需要查看的元素，被检查的元素在DOM树中以蓝色背景突出显示，样式在右侧 styles 选项卡区域内。
查看外部样式表
1、在 styles 选项卡中，单击CSS规则旁边的链接以打开定义规则的外部样式表。可以查看样式的源文件。
仅查看实际应用于元素的CSS
1、styles 选项卡中会显示适用于元素的所有规则，包括已被覆盖的声明，如果对覆盖的声明不感兴趣，可以点击与 styles 相邻的 computed 选项卡，仅查看实际应用于元素的CSS规则。
2、其中继承的属性是不透明的。选中 Show All 复选框可以查看所有继承的值。
3、注意属性的显示是按照字母顺序排列的。
4、Filter 过滤器可以按照查询规则搜索符合规则的样式。
5、当鼠标悬浮在某一行属性上时，会出现一个圆形箭头按钮，点击可以跳转到styles 选项卡所对应的样式处。
查看元素伪状态
1、在 styles 选项卡中点击 :hov 。以 :hover 为例，选中 :hover 复选框，如果
被检查的元素添加了 :hover 样式，在样式列表中就会显示此条样式。并且页面效果不用鼠标悬浮也会触发显示效果。
添加或更改CSS样式
添加内联样式
1、相当于向HTML的 style 属性的添加属性值。点击 element.style 顶部附近区域，输入新添加的样式属性名，按 Tab 键，再输入样式属性值，并按 Enter 键。这样就添加了一条内联样式。
2、查看效果：
向已有样式规则添加声明
1、单击要添加声明的样式规则的括号之间。出现光标，输入属性名，按 tab 键，输入属性值，回车。
修改已有样式规则的声明
1、在需要更改的原有样式上双击，修改样式规则，并按 Enter 键。
给元素添加CSS类
1、在 styles 选项卡中点击 .cls 。会显示一个 Add new class 的输入框，你可以输入你想要添加的类名，然后按 Enter 键。
相关阅读 >>
推荐一个Chrome devtools实用小插件：css overview panel
更多相关阅读请进入《Chrome》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
