CSS 如何在Chrome开发者工具中过滤和显示仅应用的CSS（类似于Firefox中的Firebug）

在本文中，我们将介绍如何使用Chrome开发者工具过滤和显示仅应用的https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS，类似于Firefox中的Firebug。Chrome开发者工具是一款功能强大的调试工具，它可以帮助开发人员查看和修改网页的源代码、https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS、JavaScript等。但有时候，当网页中包含大量的CSS规则时，开发者可能会希望只显示已被应用的CSS规则，以便更好地理解和修改页面样式。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用Chrome开发者工具显示已应用的CSS规则

要查看网页中已应用的CSS规则，我们可以使用Chrome开发者工具的Elements面板和Styles面板。以下是详细步骤：

打开Chrome浏览器，访问要调试的网页。
在浏览器窗口中右键单击要调试的元素，并选择“检查”或使用快捷键Ctrl+Shift+I打开开发者工具。
在开发者工具中，切换到Elements面板。
在Elements面板中，定位到要查看已应用CSS规则的元素。
在页面视图中，可以看到元素的HTML结构。选中元素后，在Styles面板中会显示该元素的CSS规则。

过滤显示已应用的CSS规则

有时候，页面中的CSS规则非常复杂，而开发者只关心已应用的CSS规则。在Chrome开发者工具中，我们可以使用过滤器来仅显示已应用的CSS规则。以下是具体操作步骤：

打开Chrome浏览器，访问要调试的网页。
在浏览器窗口中右键单击要调试的元素，并选择“检查”或使用快捷键Ctrl+Shift+I打开开发者工具。
在开发者工具中，切换到Elements面板。
在Elements面板中，定位到要查看已应用CSS规则的元素。
在Styles面板中，点击左上角的“加号”图标，展开CSS规则面板。
在CSS规则面板上方的搜索框中输入”:visible”，将只显示已应用的CSS规则。

示例说明

让我们通过一个简单的示例来演示如何在Chrome开发者工具中过滤和显示已应用的CSS规则。

假设要调试的网页有以下HTML代码：

<div class="box">这是一个示例文字</div>

对应的CSS样式如下：

.box {
  background-color: red;
  color: white;
  padding: 10px;
  font-size: 20px;
  border: 1px solid black;
}

.box:hover {
  background-color: blue;
  color: yellow;
}

现在，我们想只显示已应用的CSS规则，即仅显示.box元素的CSS规则。