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

【问题标题】：What does it mean when a CSS rule is grayed out in Chrome's element inspector?当 CSS 规则在 Chrome 的元素检查器中显示为灰色时，这意味着什么？
【发布时间】：2011-03-16 23:38:58
【问题描述】：

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

【问题讨论】：

标签： css google-chrome browser inspector

【解决方案1】：

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

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

检查器会将规则color:red; 显示为灰色，color:blue; 正常显示。

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

编辑：

Mixup：灰色的规则是未设置的规则，它使用一个特殊的默认样式表，应用于所有元素（使元素可渲染的规则，因为所有样式都必须有一个值)。

【讨论】：

我刚刚测试过这个，我认为这是不正确的。在规则被覆盖的情况下，会有一个删除线（正如我的问题所示）。见：yfrog.com/f/j3fooep
@Rob：因为 devtools 没有启动，所以搞混了。我让它运行起来，并用我的 tested 答案编辑了我的答案。
我也不完全确定这是否正确；褪色的规则是我在自己的样式表中设置的（例如，font-size: 20px;）

【解决方案2】：

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

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

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

实时示例：检查包含文本“Hello, world!”的元素

div { 
  margin: 0;
}

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

&lt;div id="foo"&gt;Hello, world!&lt;/div&gt;

【讨论】：

@Rob 准确地说，当一个样式显示为灰色时，表示它是从其他包含元素继承而来的，但不适用于所选元素。从文档中：“窗格仅包含直接适用于所选元素的规则中的属性。为了额外显示继承的属性，请启用显示继承的复选框。这些属性将以暗色字体显示。”
@RobSobers 不幸的是，我不认为您的示例演示了继承。 div 继承自的祖先父级在哪里？如果您在 Chrome 的样式窗格中向下滚动，您会看到标题为“继承自...”的部分，那里的灰色规则是什么意思？你能把它整合到一个例子中吗？
我不明白为什么这个答案是。标记为最佳答案和 b。有这么多的赞成票。这显然是错误的。边距不是可继承的属性 (stackoverflow.com/a/5612360/24267) Michael Coleman 的回答是正确的。哦，你的意思不是从祖先元素继承，你的意思是......我不确定你的意思是什么。无论如何，这个答案在 2015 年的 Chrome 46 中是不正确的。
很明显，投票是针对一些带有箭头的 MS Paint 魔法和气泡阴影效果。被否决为不正确。
@mhenry1384 "a" 很容易解释：因为它是由提出问题的人写的。

【解决方案3】：

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

【讨论】：

这是我的问题。谢谢！

【解决方案4】：

对我来说，当前的答案并没有充分解释这个问题，所以我添加了这个答案，希望对其他人有用。

灰色/变暗文本，可能表示任一

这是浏览器应用的默认规则/属性，包括默认的速记属性。
它涉及到稍微复杂一点的继承。

继承

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

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

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

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

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

文章摘录

这个[继承场景]偶尔会造成一些混乱，因为默认速记属性；图 21 说明了默认的速记字体属性的属性以及非继承的特性。请注意您正在查看的上下文检查元素。

【讨论】：

“继承的规则，但未应用，它们将显示为灰色/变暗文本”的说法不正确。如果未应用，它们将带有删除线。我已经用屏幕截图和一个实例更新了我的答案。
这是正确答案！！！关键句是......“如果该集合中存在规则但由于它是不可继承的属性（例如背景颜色）而未被应用，它将显示为灰色/变暗文本。”
这绝对是正确的答案。如果在“继承自 [选择器]”的部分中出现灰色属性，则它是不可继承的属性，不会应用于当前元素。任何被划掉的属性都已被更具体的样式覆盖。
如果规则在不可继承时显示为灰色，为什么我的 div 元素的“宽度”规则显示为灰色？宽度不能继承吗？顺便说一句，我是认真地问这个问题。
... 因此，如果您看到 Chrome 将大量应用的 css 规则变灰 - 您可以取消选中它们（或更改它们的值）并在页面上看到相应的更改 - 它可能是规则影响元素，但不是应用特定的元素，而是父元素。

【解决方案5】：

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

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

当您选择 p 元素时，Chrome 中的样式窗格如下所示...

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

background-color:blue 是不可继承的，但它是包含 text-indent: 1em 的规则集的一部分，它是可继承的，Chrome 的开发人员希望在显示规则集时完整。但是，为了区分规则集中可继承的样式和不可继承的样式，不可继承的样式显示为灰色。

【讨论】：

这是最好的答案，因为它提供了一个简单的演示。在新选项卡中打开该 URL 并使用 Chrome 开发人员工具选择各种 divs 和 p。您将看到background-color 没有为div#two 灰显。但是background-color 对于div#three 和p 是灰色的。
很好的解释

【解决方案6】：

使用 webpack 时，任何在源代码中更改的 css 规则或属性在重建后重新加载页面时都会灰显。这真的很烦人，迫使我每次都重新加载页面。

【讨论】：

【解决方案7】：

新版chrome开发者显示继承自哪里。

【讨论】：

【解决方案8】：

在问题已经有很多正确答案之后很久我才回答，因为我遇到了另一种情况，即在 Chome DevTools 中有一段 CSS 代码变灰且不可编辑：有问题的代码块包含 U+200B ZERO WIDTH SPACE characters。找到并删除它们后，我可以再次在 Chrome DevTools 中编辑该块。据推测，其他非ASCII字符也可能发生这种情况，我没有试图弄清楚。

【讨论】：