chrome devtools使用之css篇入门

查看元素的CSS

1、打开调试工具，点击调试工具左上角的检查元素按钮或者快捷键（Ctrl/Cmd + Shift + C）

2、在页面选中需要查看的元素，被检查的元素在DOM树中以蓝色背景突出显示，样式在右侧 styles 选项卡区域内。

添加或更改CSS样式

1、添加内联样式，点击 element.style 顶部附近区域，输入新添加的样式属性名，按 Tab 键，再输入样式属性值，并按 Enter 键。这样就添加了一条内联样式。

2、更改样式，在需要更改的原有样式上点击，修改样式，并按 Enter 键。

3、查看效果：

给元素添加CSS类

1、在 styles 选项卡中点击 .cls 。会显示一个 Add new class 的输入框，你可以输入你想要添加的类名，然后按 Enter 键。

查看元素伪状态

1、在 styles 选项卡中点击 :hov 。以 :hover 为例，选中 :hover 复选框，如果
被检查的元素添加了 :hover 样式，在样式列表中就会显示此条样式。并且页面效果不用鼠标悬浮触发也会显示出来。

更改元素尺寸

1、在 styles 选项卡的框模型图中，将鼠标悬浮在需要编辑的区域，双击，填入需要修改的数值，回车。盒模型的默认单位为像素，输入百分比也会转成像素值。