Chrome DevTools：查看和修改 CSS

完成以下交互式教程，了解使用 Chrome 开发者工具查看和修改网页 CSS 的基础操作。练习元素和输入框位于官方交互页面；操作时打开该页面。本文保留练习中元素的英文文字，便于定位。

查看元素的 CSS

1. 右键点击官方页面中的 Inspect me! 文本，选择 检查。开发者工具的 Elements（元素） 面板会打开。
2. 观察 DOM 树中以蓝色高亮显示的 Inspect me! 元素。
3. 在 DOM 树中，找到该元素的 data-message 属性值。
4. 将属性值填入官方页面对应的输入框。
5. 在 Elements > Styles（样式） 标签页中找到 aloha 类的规则。

Styles 标签页列出应用于当前选中 DOM 元素的 CSS 规则。此时选中的应当仍是 Inspect me! 元素。

6. aloha 类声明了 padding。在官方页面的对应输入框中填写它的值和单位，不加空格。

如果希望像原文截图那样将开发者工具停靠在视口右侧，请参阅更改开发者工具的停靠位置。

给元素添加 CSS 声明

使用 Styles 标签页修改或添加 CSS 声明。

1. 右键点击官方页面中的 Add a background color to me! 文本，选择 检查。
2. 点击 Styles 标签页顶部附近的 element.style。
3. 输入 background-color，按 Enter。
4. 输入 honeydew，按 Enter。DOM 树会显示该元素已经应用内联样式声明。

给元素添加 CSS 类

通过 Styles 标签页，可以观察添加或移除 CSS 类时元素外观的变化。

1. 右键点击官方页面中的 Add a class to me! 元素，选择 检查。
2. 点击 .cls。开发者工具会显示一个输入框，用于给选中元素添加类。
3. 在 Add new class（添加新类） 输入框中输入 color_me，按 Enter。输入框下会出现一个复选框，可启用或停用该类。若元素还有其他类，也能在此切换。

给元素添加伪状态

使用 Styles 标签页为元素应用 CSS 伪状态。

1. 将鼠标悬停在官方页面的 Hover over me! 文本上，观察背景颜色变化。
2. 右键点击该文本，选择 检查。
3. 在 Styles 标签页中点击 :hov。
4. 勾选 :hover。即使鼠标实际没有悬停在元素上，背景颜色也会呈现之前悬停时的效果。

更多操作见切换伪类。

修改元素尺寸

通过 Styles 标签页中的交互式盒模型图，修改元素宽度、高度、内边距、外边距或边框尺寸。

1. 右键点击官方页面的 Change my margin! 元素，选择 检查。
2. 在 Styles 标签页的操作栏中点击 Show sidebar（显示侧栏），查看盒模型。按钮图标：

3. 将鼠标悬停在盒模型图的内边距区域，视口会高亮元素的内边距。

4. 双击盒模型图中的左外边距。此时元素没有该外边距，margin-left 显示为 -。
5. 输入 100，按 Enter。

盒模型默认使用像素，也接受 25%、10vw 等其他值。也可以直接在 Styles 中的规则声明里使用指针调整长度属性及单位。

作者：Kayce Basques、Sofia Emelianova。来源：View and change CSS，参考官方中文版本，原页最后更新：2024-03-12（UTC）。

正文和官方教程图片采用 CC BY 4.0；代码示例采用 Apache 2.0。参阅 Google 开发者网站政策。改动：重新整理中文术语与排版，修正“类”的误译，保留全部操作步骤与官方截图，交互练习指向原页。封面为概念插画。未在当前环境实际执行教程操作。