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

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

灰色/变暗的文本，可能意味着

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

遗产

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

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

应用于当前选定元素的规则出现在普通文本中。

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

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

文章摘录

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

---

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

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

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

https://i.stack.imgur.com/o626m.png

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

div {边距：0； } div#foo { 边距顶部：10px; }

---

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

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

https://i.stack.imgur.com/JqP48.png

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

https://i.stack.imgur.com/bOXDn.png

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

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

---

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

---

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

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

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

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

编辑：

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

---

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

---

https://i.stack.imgur.com/f9Ybm.jpg

新版 chrome developer 显示它是从哪里继承的。

---

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

---