282

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

4

8 回答 8

112

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

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

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

遗产

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

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

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

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

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

文章摘录

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

于 2015-03-04T03:04:43.523 回答
85

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

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>

于 2011-06-14T23:29:47.363 回答
34

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

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

HTML

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

样式窗格

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

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

于 2015-08-27T21:07:29.223 回答
11

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

于 2014-03-18T20:38:58.790 回答
5

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

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

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

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

编辑：

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

于 2010-07-16T14:01:01.970 回答
0

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

于 2016-08-01T11:27:33.020 回答
0

在此处输入图像描述

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

于 2017-09-18T21:17:52.427 回答
-1

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

于 2018-04-19T20:50:42.507 回答