当一个CSS规则在chrome的元素检查器中变灰时，这意味着什么?

我正在使用谷歌Chrome的元素检查器检查网页上的h2元素，一些CSS规则-似乎被应用-是灰色的。划除似乎表明规则被覆盖，但是当样式变灰时意味着什么呢?

101304 次浏览
小开

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

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

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

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

编辑:

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

小开

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

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>

小开

如果您通过检查器添加了一个样式，但新样式没有应用到所选择的元素，也会发生这种情况。通常显示的样式只是所选元素的样式，所以灰色表示您刚刚添加的样式没有选择在DOM导航器中有焦点的元素。

小开
最佳答案

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

灰色/暗淡的文本，可以表示要么

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

继承

注意:Chrome开发工具“style”面板将显示一个规则集，因为集合中的一个或多个规则正在应用到当前选择的DOM节点。 我想，出于完整性的考虑，开发工具会显示该集合中的所有规则，无论它们是否被应用

在由于继承而将规则应用到当前所选元素的情况下(即规则应用于祖先，所选元素继承了它)，chrome将再次显示整个规则集。

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

如果一个规则存在于该集合中，但因为它是一个不可继承的属性(例如背景色)而没有应用，它将显示为灰色/暗色文本。

这里有一篇文章给出了很好的解释-(注意:相关项目在文章的底部-图21 -不幸的是相关部分没有标题)- __abc0

文章节选

这个[继承场景]偶尔会造成一些混乱，因为默认 速记性质;图21展示了默认的速记 属性的字体属性和非继承的 属性。只要注意你所看到的环境 检查元素。< / p >
小开

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

HTML/DOM看起来是这样的…

HTML

当你选择p元素时，Chrome的样式面板看起来是这样的…

Styles Pane

如您所见，p元素继承了它的祖先(div元素)。那么为什么background-color: blue样式是灰色的呢?因为它是规则集的一部分，该规则集至少有一个可继承的样式。这个可继承的样式是text-indent: 1em

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

小开

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

小开

enter image description here

新版本的chrome开发人员显示它从哪里继承。

小开

在这个问题已经有很多正确答案之后，我回答了很长时间，因为我遇到了一个不同的情况，在Chome DevTools中有一个CSS代码块变灰并且不可编辑:该块包含U+200B零宽度空格字符。一旦我找到这些并删除它们，我就可以再次在Chrome DevTools中编辑该块。这大概也会发生在其他非ascii字符上，我还没有试图弄清楚。


提交答案