Chrome的元素检查器中的CSS规则是灰色的，这是什么意思？

我正在使用Google Chrome的元素检查器检查网页上的h2元素，并且某些似乎已应用的CSS规则呈灰色显示。看来，一个突破表明一个规则被覆盖，但是当一个风格变灰时，这意味着什么？

对我来说，目前的答案没有充分解释这个问题，所以我join了这个答案，希望对别人有用。

灰色/变暗的文字，可以表示

注意：Chrome开发工具的“样式”面板将显示规则集，因为集合中的一个或多个规则正被应用到当前选定的DOM节点。我想，为了完整起见，开发工具显示了该集合中的所有规则，无论它们是否被应用。

在由于inheritance而将规则应用于当前选定的元素的情况下（即，该规则被应用于祖先，并且所选元素inheritance该元素），chrome将再次显示整个规则集。

应用于当前选定元素的规则以正常文本显示。

如果规则存在于该集合中，但由于它是非可inheritance属性（如背景色）而不适用，则会显示为灰色/灰色文本。

这里有一篇文章给出了一个很好的解释 – （注：相关项目在文章底部 – 图21 – 不幸的是相关部分没有标题） – http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

摘自文章

这种[inheritancescheme]偶尔会造成一些混乱，因为违约的短期属性; 图21显示了font属性的默认短手属性以及非inheritance属性。只要注意你在检查元素时所看到的上下文。

这意味着该规则已被inheritance，但不适用于所选元素：

该窗格仅包含直接适用于所选元素的规则中的属性。为了额外显示inheritance的属性，启用显示inheritancecheckbox。 这些属性将以暗淡的字体显示。

灰色的规则是从祖先继承的

现场示例：检查包含文字“Hello，world！”的元素

 div { margin: 0; } div#foo { margin-top: 10px; }

 <div id="foo">Hello, world!</div>

迈克尔·科尔曼有正确的答案。我只是想添加一个简单的图像去配合它。他包括的链接有这个简单的例子： http : //commandlinefanatic.com/art033ex4.html

HTML / DOM看起来像这样…

HTML

Chrome中的样式窗格看起来像这样，当你selectp元素…

样式窗格

正如你所看到的，p元素是从它的祖先（divs）inheritance而来的。那么为什么background-color: blue灰色的呢？因为它是至less有一种可inheritance的风格的规则集的一部分。这个可inheritance的风格是text-indent: 1em

background-color:blue不是可inheritance的，但是它是包含text-indent: 1em的规则集的一部分，这是不可接受的，Chrome的开发者希望在显示规则集时完整。但是，要区分可以从不可以inheritance的规则集中的样式，不可变的样式将变灰。

如果通过检查器添加样式，也会发生这种情况，但是新样式不适用于所选元素。通常所显示的样式只是所选元素的样式，所以灰色表示您刚刚添加的样式不会selectDOM导航器中具有焦点的元素。

这意味着这个规则已经被更高优先级的另一个规则取代了。例如样式表：

 h2 { color: red; } h2 { color: blue; }

检查员将显示规则color:red; 灰色和color:blue; 一般。

阅读CSSinheritance ，了解哪些规则被inheritance/具有更高的优先级。

编辑：

混合：灰色的规则是未设置的规则，它使用了一个特殊的默认样式表应用于所有元素（使元素可呈现的规则，因为所有样式都必须有一个值）。

当使用webpack时，在重build后重新加载页面时，源代码中已更改的任何css规则或属性将变灰。这真的很烦人，每次都强迫我重新加载页面。

在这里输入图像说明

铬版开发者的新版本显示它从哪里inheritance。