是否可以找到导致规则在 Chrome 检查器中显示为灰色值的父 CSS？

Posted 2023-03-06

【中文标题】是否可以找到导致规则在 Chrome 检查器中显示为灰色值的父 CSS？

【英文标题】：Is it possible to locate the parent CSS which causes a rule to be grayed out value in Chrome inspector?

【发布时间】：2020-02-27 08:01:15

【问题描述】：

我正在编辑现有网站的页脚以匹配其上方部分的宽度。该行在 Chrome 网络检查器中显示为灰色。如何找到通知此宽度的 CSS？

What does it mean when a CSS rule is grayed out in Chrome's element inspector? 回答了为什么会发生这种情况的问题，但现在如何解决它。

【参考方案1】：

您正在查看 Computed 选项卡，它与其他 Q/A 所指的 Styles 完全不同。

在 Computed 选项卡中，您会得到与在元素上调用 getComputedStyle 相同的结果。您可能知道，这些值不一定是创作的。

那里的灰色值表示该值没有被任何明确的规则分配，但例如在这里，这是因为页面的内容使其具有 computed 宽度为981px . 如果您确实在此元素上设置了规则，您将拥有可折叠菜单来告诉您应用了哪个规则。

.with-rule 
  width: auto; /* even if authored as auto */

<div class="no-rule">My width will be greyed out in the Computed Tab</div>
<div class="with-rule">I will have  a collapsible menu</div>

现在也许您应该更喜欢 样式 选项卡，它会为您提供有关应用于您的元素的实际 规则 的更多信息。