当Chrome的元素检查器中的CSS规则显示为灰色时，意味着什么？ [英] What does it mean when a CSS rule is grayed out in Chrome's element inspector?

问题描述

我使用Google Chrome的元素检查器检查网页上的 h2 元素，并且一些CSS规则（似乎已应用）显示为灰色。看起来，透视表示规则被覆盖，但是当样式变灰时，是什么意思？

I'm inspecting an h2 element on a web page using Google Chrome's element inspector and some of the CSS rules--which appear to be applied--are grayed out. It seems that a strike-through indicates that a rule was overridden, but what does it mean when a style is grayed out?

推荐答案

这表示该规则已被继承，但不适用于所选元素：

It means that the rule has been inherited, but is not applicable to the selected element:

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

窗格仅包含直接适用于所选元素的规则的属性。为了额外显示继承的属性，请启用显示继承复选框。 此类属性将以灰色字体显示。

实例：检查包含文本Hello，世界！

Live example: inspect the element containing the text "Hello, world!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

这篇关于当Chrome的元素检查器中的CSS规则显示为灰色时，意味着什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！