CSS 教程 / 使用开发者工具检查 CSS：Styles 与 Computed

浏览器开发者工具让你检查哪些 CSS 声明匹配某个元素，以及最终使用了哪些值。样式（Styles）解释匹配和被覆盖的规则，而计算值（Computed）帮助你检查最终属性值；在开发者工具中的编辑通常是临时的。

准备示例和预期结果

将下面的整个代码保存为 index.html，使用 UTF-8 格式，并在浏览器中打开。在此示例中，营业时间段落显示为绿色，第一个常规段落显示为灰色。提示信息包含 16px 内边距和浅色背景，以便通过属性比较结果。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

示例将 CSS 写在 HTML 文档的 style 元素中，因此只需一个练习文件。如果你已经在使用外部 CSS 练习，可以将相同规则放入 style.css，但在开发者工具中显示的文件名和行号将不同。确认预期文本显示在屏幕上后，打开开发者工具。

在 Elements（元素）中选择正确的元素

1. 在页面上右键点击句子 We open at 9 a.m. every day.（我们每天上午九点开门）并选择“检查”。在 Windows 的 Chrome 或 Edge 中，你也可以使用 F12 或 Ctrl+Shift+I 打开开发者工具。
2. 在“元素”标签中，检查所选行是否为 <p class="notice">。如果选择了其他元素，使用元素选择工具再次选择提示信息。工具的位置和菜单语言可能因浏览器/版本而异。
3. 在所选元素旁边或下方打开“样式”。注意，.notice 和 p 规则都可见。在窄窗口中，面板可能会放置在底部，或者某些标签可能会收进显示更多标签的溢出菜单中。

Elements 展示的是文档对象模型（Document Object Model，DOM），即浏览器解释的文档结构。它并不总是与页面源代码相同。当浏览器修正了错误的 HTML，或者 JavaScript 替换了一个元素时，实际的选择必须基于 Elements 中显示的结构来确定。

该图总结了 Styles 中匹配规则与 Computed 中最终值之间的关系。图中的布局用于解释规则关系。在开发者工具中，打开 Computed 并筛选 color 来检查相同的值。面板可能会根据浏览器布局和版本显示在不同的位置。

比较 Styles 和 Computed

样式显示与所选元素匹配的规则、直接写在元素上的内联样式以及与继承相关的规则。p { color: #666; } 和 .notice { color: #087f5b; } 都匹配提示信息，但最终文本颜色是绿色。这是因为在相同来源/重要性/层条件下，类选择器的优先级高于元素选择器。

如果某条声明以灰色和删除线显示，先检查是否有其他声明胜出，再判断是否存在语法错误。删除线和警告标志的含义可能因位置和情况而异，因此将鼠标悬停在声明上并阅读说明。padding: 16px 是与 color 分开的属性，因此即使存在颜色冲突，它们也可以一起应用。

Computed 用于检查所选元素的最终计算样式。打开选项卡并在过滤器中输入 color 以查找文本颜色。#087f5b 可能显示为 rgb(8, 127, 91)，它们是相同的颜色。展开属性以跟踪相关规则和来源。某些属性可能在默认列表中被隐藏，因此也要检查显示选项。

Chrome DevTools CSS 功能文档 解释了面板及如何编辑声明。要理解声明冲突的原因，请比较 CSS 继承、选择器优先级与层叠 中的条件示例。

切换声明并编辑值

1. 在样式中，查找 .notice 对 color: #087f5b 的声明。取消选中声明旁边的复选框只会暂时排除此声明。因此，确认该提示信息的颜色是否更改为灰色以应用 p 规则。
2. 再次选中复选框以将其恢复为原来的绿色。然后点击颜色值并将其更改为 #1d4ed8，按下回车键。验证提示信息中的文本是否仅更改为蓝色，而背景颜色仍保持浅绿色。
3. 在 Computed（计算值）面板中再次检查文本颜色。如果显示为 rgb(29, 78, 216)，则与您更改的蓝色匹配。背景是一个单独的属性，称为 background-color。
4. 本练习默认不启用工作区保存或 Local Overrides（本地覆盖），因此当你刷新时，你在开发者工具中更改的颜色将消失，你会回到原来的绿色。在确认原始内容没有被更改后，进行下一步。

已取消勾选的声明可以通过重新勾选复选框恢复，错误更改的值可以通过重新输入现有值来恢复。如果你想一次性删除所有其他更改，可以在未启用保存功能的情况下刷新，就像本练习中一样。如果你启用了工作区链接或本地覆盖，保存和维护的方式可能会改变，因此不要以为刷新后就会自动恢复。

将已确认的更改保存到源文件

在样式中点击规则的源文件名和行号以定位它。由于此示例在 HTML 中嵌入了 CSS，请在原始 index.html 中编辑相应的规则。对于外部样式表，请打开那里标识的文件，例如 style.css。在编辑同名的副本之前检查路径。有关更多详细信息，请参见 使用内联、内部和外部样式应用 CSS 。

1. 在文本编辑器中打开你实际打开的 index.html 文件。如果你将文件复制到多个文件夹，请确保文件路径与浏览器地址匹配。
2. 将原始 .notice 规则的颜色值更改为 #1d4ed8 并保存。
3. 刷新你的浏览器。现在，如果你再次打开它并且提示信息以蓝色显示，说明它已经反映在原始内容中。
4. 完成练习后要返回原始设计，请将 #087f5b 的原始颜色恢复并保存/刷新。

区分三种常见的 CSS 问题

对于每种情况，逐一更改原始内容，保存/刷新，检查，然后再还原。在第一种情况中，不匹配所选元素的 .notcie 规则可能不会出现在 Styles 的常用规则列表中。在第三种情况中，警告的显示方式取决于它创建的位置和浏览器版本。通过将情况分为没有规则、有规则但已被覆盖，以及声明本身无效的情况，你可以看到需要修复的地方。