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

Question

我正在h2使用谷歌浏览器的元素检查器检查网页上的元素,并且一些似乎已应用的CSS规则显示为灰色.看起来罢工表明规则被覆盖了,但是当样式变灰时它意味着什么？

Answer 1

对我来说,目前的答案并没有完全解释这个问题,所以我添加了这个答案,希望对其他人有用.

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

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

遗产

注意:Chrome开发工具"样式"面板将显示规则集,因为该集合中的一个或多个规则正在应用于当前选定的DOM节点.我想,为了完整起见,开发工具会显示该集合中的所有规则,无论它们是否应用.

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

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

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

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

摘自文章

这种[继承场景]偶尔会产生一些混乱,因为缺省的短手属性; 图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继承的文章，以了解哪些规则被继承/具有更高的优先级。

编辑：

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