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

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

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

变灰/变暗了文本，可能意味着无论是

1. 这是浏览器适用的默认规则/属性，其中包括默认的速记属性。
2. 它涉及到继承，继承要复杂一些。

遗产

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

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

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

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

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

文章摘录

由于默认的速记属性，这种[继承方案]有时会造成一些混乱。图21说明了font属性的默认速记属性以及非继承属性。只需在检查元素时了解所要查看的上下文即可。

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

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

该窗格仅包含直接适用于所选元素的规则中的属性。为了另外显示继承的属性，请启用显示继承的复选框。这些属性将以灰色字体显示。

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

div { 
  margin: 0;
}

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

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

迈克尔·科尔曼（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导航器中具有焦点的元素。

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

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

检查员将规则显示为color:red;灰色且color:blue;正常。

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

编辑：

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

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

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

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