我正在使用谷歌Chrome的元素检查器检查网页上的h2元素和一些CSS规则-似乎被应用-是灰色的。划除似乎表明规则被覆盖，但是当样式变灰时意味着什么呢?
当前回答
这意味着该规则已被另一个具有更高优先级的规则所取代。例如样式表:
h2 {
color: red;
}
h2 {
color: blue;
}
检查器将显示规则颜色:红色;灰色和颜色:蓝色;正常。
阅读CSS继承，了解哪些规则被继承/具有更高的优先级。
编辑:
混合:灰色的规则是未设置的规则，它使用一个特殊的默认样式表，应用于所有元素(使元素可呈现的规则，因为所有样式都必须有一个值)。
其他回答
这意味着该规则已经被继承，但不适用于所选元素:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
该窗格仅包含来自直接适用于所选元素的规则的属性。为了额外显示继承的属性，启用“显示继承的属性”复选框。这样的属性将以暗淡的字体显示。
实例:检查包含文本“Hello, world!”的元素
div { 保证金:0; ｝ div# foo { margin-top: 10 px; ｝ <div id="foo">你好，世界!< / div >
这意味着该规则已被另一个具有更高优先级的规则所取代。例如样式表:
h2 {
color: red;
}
h2 {
color: blue;
}
检查器将显示规则颜色:红色;灰色和颜色:蓝色;正常。
阅读CSS继承，了解哪些规则被继承/具有更高的优先级。
编辑:
混合:灰色的规则是未设置的规则，它使用一个特殊的默认样式表，应用于所有元素(使元素可呈现的规则，因为所有样式都必须有一个值)。
当使用webpack时，在源代码中更改的任何css规则或属性在重新构建后重新加载页面时都是灰色的。这真的很烦人，迫使我每次都要重新加载页面。
如果您通过检查器添加了一个样式，但新样式没有应用到所选择的元素，也会发生这种情况。通常显示的样式只是所选元素的样式，所以灰色表示您刚刚添加的样式没有选择在DOM导航器中有焦点的元素。
在这个问题已经有很多正确答案之后，我回答了很长时间，因为我遇到了一个不同的情况，在Chome DevTools中有一个CSS代码块变灰并且不可编辑:该块包含U+200B ZERO WIDTH SPACE字符。一旦我找到这些并删除它们，我就可以再次在Chrome DevTools中编辑该块。这大概也会发生在其他非ascii字符上，我还没有试图弄清楚。
