我正在使用Google Chrome浏览器的元素检查器检查网页上的h2元素，并且似乎已应用的某些CSS规则显示为灰色。 删除线似乎表明一条规则已被覆盖，但是样式变灰是什么意思？

对我来说，当前的答案并不能完全解释问题，所以我添加了这个答案，希望对其他人有用。

文字变灰/变暗，可能表示

遗产

注意：Chrome开发者工具的"样式"面板将显示一个规则集，因为该集中的一个或多个规则已应用于当前选定的DOM节点。 我想，出于完整性考虑，无论是否应用，开发工具都会显示该集合中的所有规则。

如果由于继承而将规则应用于当前选定的元素(即，该规则应用于祖先，并且所选元素继承了该规则)，则chrome将再次显示整个规则集。

应用于当前所选元素的规则以普通文本显示。

如果该规则中存在一个规则，但由于它是不可继承的属性(例如背景色)而未应用，则该规则将显示为灰色/灰色文本。

这是一篇提供了很好解释的文章-(注意：相关项目在文章的底部-图21-不幸的是相关部分没有标题)-http：//commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

文章摘录

This [inheritance scenario] can occasionally create a bit of confusion, because defaulted short-hand properties; figure 21 illustrates the defaulted short-hand properties of the font property along with the non-inherited properties. Just be aware of the context that you're looking at when examining elements.

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

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.

实时示例：检查包含文本" Hello，world！"的元素。

迈克尔·科尔曼(Michael Coleman)的答案正确。我只想添加一个简单的图像即可。他包含的链接有一个简单的示例：http://commandlinefanatic.com/art033ex4.html

HTML / DOM看起来像这样...

当您选择p元素时，Chrome中的样式面板看起来像这样...

如您所见，p元素继承自其祖先(div)。那么为什么background-color: blue样式变灰呢？因为它是规则集的一部分，该规则集至少具有一种可继承的样式。那可继承的样式是text-indent: 1em

background-color:blue是不可继承的，但是它是规则集的一部分，该规则集包含可继承的text-indent: 1em，Chrome的开发人员希望在显示规则集时做到完整。但是，为了在规则集中可以从不能继承的样式中区分出样式，将无法继承的样式显示为灰色。

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

这意味着该规则已被另一个具有更高优先级的规则替换。例如带有以下内容的样式表：

检查器将显示规则color:red;变灰，而color:blue;正常显示。

阅读有关CSS继承的文章，以了解哪些规则被继承/具有更高的优先级。

编辑：

混合：变灰的规则是未设置的规则，它使用适用于所有元素的特殊默认样式表(使元素可呈现的规则，因为所有样式都必须具有值)。

使用webpack时，在重建后重新加载页面时，源代码中已更改的所有css规则或属性都将显示为灰色。这真的很烦人，迫使我每次都重新加载页面。

在该问题已经有许多正确答案之后，我要回答很久，因为我遇到了另一种情况，即Chome DevTools中的CSS代码块显示为灰色且不可编辑：有问题的块包含U + 200B零宽度空格字符。 找到并删除它们后，可以再次在Chrome DevTools中编辑该块。 大概这也可能与其他非ascii字符一起发生，我没有试图弄清楚。

chrome开发人员的新版本显示了它的继承来源。