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

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

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

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

迈克尔·科尔曼（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开发人员希望在显示规则集时保持完整。但是，为了在规则集中可以从不能继承的样式中区分出样式，将无法继承的样式显示为灰色。

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

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

The inspector will show the rule color:red; grayed out and color:blue; normally.

Read up on CSS inheritance to learn which rules are inherited/have higher priority.

EDIT:

Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to all elements(the rules that make the element renderable, because all styles have to have a value).

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

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>

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