当Chrome规则在Chrome的元素检查器中显示为灰色时，这意味着什么？

Question

我正在使用Google Chrome的元素检查器检查网页上的h2元素，并且一些似乎已应用的CSS规则显示为灰色。似乎一个删除表明规则被覆盖了，但是当一个样式变灰时它意味着什么？

Answer 1

对我来说，目前的答案并没有完全解释这个问题，所以我想补充这个答案，希望对其他人有用。

灰色/暗淡的文字，可能意味着

1. 它是浏览器应用的默认规则/属性，包括默认的短手属性。
2. 它涉及更复杂的继承。

继承

注意：Chrome开发工具＆＃34; style＆＃34; panel将显示一个规则集，因为该集合中的一个或多个规则正在应用于当前选定的DOM节点。 我想，为了完整起见，开发工具会显示该集合中的所有规则，无论它们是否应用。

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

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

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

这篇文章给出了一个很好的解释 - （注意：相关项目位于文章的底部 - 图21 - 遗憾的是相关部分没有标题） - http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033 < / p>

摘自文章

  

这种[继承场景]偶尔会造成一些混乱，因为违约   短手属性;图21显示了默认的短手   font属性的属性以及非继承的   属性。请注意您在何时查看的背景信息   审查要素。

Answer 2

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

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>

Answer 3

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

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

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

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

background-color:blue不是可继承的，但它是包含text-indent: 1em的规则集的一部分，该规则集是无法修复的，并且Chrome的开发人员希望在显示规则集时完成。但是，要区分规则集中可从非样式的样式继承的样式，不可阻止的样式将变灰。

Answer 4

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

Answer 5

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

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

检查员会正常显示规则color:red;并且color:blue;正常显示。

阅读CSS inheritance，了解哪些规则是继承的/具有更高的优先级。

修改

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

Answer 6

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

Answer 7

Chrome版本的新版本显示了它的继承地。

Answer 8

在问题已经有很多正确的答案之后我很久才回答，因为我遇到了一个不同的情况，即在Chome DevTools中有一块灰色的CSS代码并且不可编辑：有问题的块包含U+200B ZERO WIDTH SPACE characters。一旦我找到并删除它们，我就可以再次在Chrome DevTools中编辑块。据推测，这可能与其他非ascii角色一起发生，我没有试图弄明白。