在新窗口或选项卡中打开 CSS 示例 演示页。 (若要在新窗口或选项卡中打开链接，请右键单击链接。 或者，按住 Ctrl (for Windows、Linux) 或 macOS) 命令 (，然后单击 link.)

右键单击文本 Inspect Me! ，然后选择“ 检查 ”。

在“ 元素”工具 下的 “DOM 树 ”面板中， Inspect Me! 突出显示元素：

右键单击文本 Inspect Me! ，然后选择“ 检查 ”。

在 DevTools 中，在 “元素” 工具上，选择“ 样式” 面板。 元素 Inspect Me! 在“样式”面板中突出显示。

在 元素中 Inspect Me! aloha ，找到 类规则。 显示此规则，因为它正在应用于 Inspect Me! 元素。

键入 background-color 或从下拉列表中选择它，然后按 Enter 。

从颜色下拉列表中键入 honeydew 或选择它，然后按 Enter 。 选取颜色后，应用于元素的内联样式声明将显示在 DOM 树 中。

声明 background-color:honeydew 使用 element.style “样式” 面板的 部分应用于 元素：

右键单击文本 Add A Class To Me! ，然后选择“ 检查 ”。

单击 “ 元素类 ( .cls ) ”按钮。 DevTools 显示一个文本框，你可以在其中将 CSS 类添加到要检查的页面元素。

类 color_me 使用 “样式” 面板的 .cls 部分应用于 元素：

使用 “样式” 面板可将 CSS 伪状态永久应用于元素。 DevTools 支持 :active 、 :focus 、 :hover 和 :visited 。

首先，建议执行上述 查看元素的 CSS 教程。

在新窗口或选项卡中打开 CSS 示例 演示页。

将鼠标悬停在 Hover Over Me! 文本上。 背景色会更改。

右键单击文本 Hover Over Me! ，然后选择“ 检查 ”。

在 “样式” 面板中，单击“ 切换元素状态 ( ：hov ) ”按钮。

选中 “：hover ”复选框。 背景色会像第一步一样更改，即使你实际上没有将鼠标悬停在 元素上。

下一个屏幕截图显示切换元素上的 :hover 伪状态的结果。

在 “样式” 面板的 “框模型 ”关系图中，将鼠标悬停在 填充 上。 元素的填充在视区中突出显示。

根据 DevTools 窗口的大小，可能需要滚动到 “样式” 面板底部以显示 框模型 。

双击 框模型中 的左边距，该模型当前值为 - 。 - 表示 元素没有 的值 margin-left 。

键入 100px 并按 Enter 。 框模型 默认为像素，但它也接受其他值，例如 25% 、 或 10vw 。

将鼠标悬停在元素的填充上：

调试媒体查询

CSS 媒体查询 是一种使网站对每个用户的配置设置更改做出反应的方法。 最常见的用例是根据视区的尺寸为页面提供不同的 CSS 布局。

使用单独的布局可以针对移动设备使用单列布局，并在有更多屏幕空间可用时使用多列布局。

若要调试或测试在 CSS 中定义的媒体查询，请执行以下作：

在新窗口或选项卡中打开 CSS 示例 演示页。

若要打开 DevTools，请在网页中右键单击，然后选择“ 检查 ”。

单击“ 切换设备仿真 ( ) 按钮。 或者，当 DevTools 具有焦点时，按 Ctrl+Shift+M (Windows、Linux) 或 Command+Shift+M (macOS) 。

设备工具栏将在网页中打开，网页现在呈现在“设备仿真”窗格中：

此页面的某些部分是根据 Google 创建和共享的 作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。