Chrome的元素检查器中的CSS规则是灰色的,这是什么意思?

我正在使用Google Chrome的元素检查器检查网页上的h2元素,并且某些似乎已应用的CSS规则呈灰色显示。 看来,一个突破表明一个规则被覆盖,但是当一个风格变灰时,这意味着什么?

对我来说,目前的答案没有充分解释这个问题,所以我join了这个答案,希望对别人有用。

灰色/变暗的文字,可以表示

  1. 这是浏览器应用的默认规则/属性,其中包括默认的短手属性。
  2. 它涉及到更复杂一点的inheritance。

遗产

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

在由于inheritance而将规则应用于当前选定的元素的情况下(即,该规则被应用于祖先,并且所选元素inheritance该元素),chrome将再次显示整个规则集。

应用于当前选定元素的规则以正常文本显示。

如果规则存在于该集合中,但由于它是非可inheritance属性(如背景色)而不适用,则会显示为灰色/灰色文本。

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

摘自文章

这种[inheritancescheme]偶尔会造成一些混乱,因为违约的短期属性; 图21显示了font属性的默认短手属性以及非inheritance属性。 只要注意你在检查元素时所看到的上下文。

这意味着该规则已被inheritance,但不适用于所选元素:

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

该窗格仅包含直接适用于所选元素的规则中的属性。 为了额外显示inheritance的属性,启用显示inheritancecheckbox。 这些属性将以暗淡的字体显示。

灰色的规则是从祖先继承的

现场示例:检查包含文字“Hello,world!”的元素

 div { margin: 0; } div#foo { margin-top: 10px; } 
 <div id="foo">Hello, world!</div> 

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

HTML / DOM看起来像这样…

HTML

Chrome中的样式窗格看起来像这样,当你selectp元素…

样式窗格

正如你所看到的,p元素是从它的祖先(divs)inheritance而来的。 那么为什么background-color: blue灰色的呢? 因为它是至less有一种可inheritance的风格的规则集的一部分。 这个可inheritance的风格是text-indent: 1em

background-color:blue不是可inheritance的,但是它是包含text-indent: 1em的规则集的一部分,这是不可接受的,Chrome的开发者希望在显示规则集时完整。 但是,要区分可以从不可以inheritance的规则集中的样式,不可变的样式将变灰。

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

这意味着这个规则已经被更高优先级的另一个规则取代了。 例如样式表:

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

检查员将显示规则color:red; 灰色和color:blue; 一般。

阅读CSSinheritance ,了解哪些规则被inheritance/具有更高的优先级。

编辑:

混合:灰色的规则是未设置的规则,它使用了一个特殊的默认样式表应用于所有元素(使元素可呈现的规则,因为所有样式都必须有一个值)。

当使用webpack时,在重build后重新加载页面时,源代码中已更改的任何css规则或属性将变灰。 这真的很烦人,每次都强迫我重新加载页面。

在这里输入图像说明

铬版开发者的新版本显示它从哪里inheritance。