如何在 Chrome DevTools 中找到覆盖样式的特定 CSS 规则？

在 Chrome 开发者工具中揭开重写 CSS 规则

在 Chrome 开发者工具中检查 Web 元素通常会发现重写的样式。然而，找到负责此类覆盖的规则可能有点令人畏惧。不过，不用担心，Chrome 提供了一种巧妙的机制来解决此问题。

揭开重写样式规则

要追踪重写规则，请深入研究 元素检查器的计算样式面板。展开您感兴趣的特定风格属性。瞧！您将看到所有适用的 CSS 规则的列表，其中展示了负责观察到的样式覆盖的获胜者。

作为示例，让我们探索一个具有被覆盖的“font-size”属性的元素。在“计算样式”面板中展开此属性将产生如下所示的结果：

font-size: 16px;
   - overridden by <link href="style2.css" rel="stylesheet"> line 10
   - origin: <inline style>

这告诉我们原始的“font-size”值是内联设置的，但覆盖来自“style2.css”第 10 行。就这么简单！

以上是如何在 Chrome DevTools 中找到覆盖样式的特定 CSS 规则？的详细内容。更多信息请关注PHP中文网其他相关文章！