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

What does it mean when a CSS rule is grayed out in Chrome's element inspector?

提问by Rob Sobers

I'm inspecting an h2element 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?

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

采纳答案by Michael Coleman

For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.

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

Greyed/dimmed out text, can mean either

变灰/变暗了文本，可能意味着无论是

1. it's a default rule/property the browser applies, which includes defaulted short-hand properties.
2. It involves inheritance which is a bit more complicated.

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

Inheritance

遗产

Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node. I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.

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

In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.

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

The rules which are applied to the currently selected element appear in normal text.

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

If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.

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

here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033

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

Excerpt from the article

文章摘录

This [inheritance scenario] can occasionally create a bit of confusion, because defaulted short-hand properties; figure 21 illustrates the defaulted short-hand properties of the font property along with the non-inherited properties. Just be aware of the context that you're looking at when examining elements.

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

回答by Rob Sobers

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

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

The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.

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

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

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

div { 
  margin: 0;
}

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

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

回答by Niko Bellic

Michael Coleman has the right answer. I just want to add a simple image to go along with it. The link that he included has this simple example: http://commandlinefanatic.com/art033ex4.html

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

The HTML/DOM looks like this...

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

The Styles Pane in Chrome looks like this when you select the p element...

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

As you can see, the p element inherits from its ancestors (the divs). So why is the style background-color: bluegrayed out? Because it's part of a rule-set that has at least one style that is inheritable. That inheritable style is text-indent: 1em

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

background-color:blueis not inheritable but it's part of the rule-set that contains text-indent: 1emwhich is inhertiable and the developers of Chrome wanted to be complete when displaying rule-sets. However, to distinguish between styles in the rule-set that are inheritable from styles that are not, the styles that are not inhertable are grayed out.

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

回答by AaronLS

This also occurs if you add a style through the inspector, but that new style doesn't apply to the element you have selected. Usually the styles shown are only those for the element selected, so the grey indicates that the style you just added doesn't select the element which has focus in the DOM navigator.

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

回答by tcooc

It means the rule has been replaced with another rule with higher priority. For example stylesheets with:

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

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

The inspector will show the rule color:red;grayed out and color:blue;normally.

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

Read up on CSS inheritanceto learn which rules are inherited/have higher priority.

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

EDIT:

编辑：

Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to allelements(the rules that make the element renderable, because all styles have to have a value).

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

回答by user2528531

When using webpack, any css rule or property that has been changed in the source code is grayed out when the page reloads after a rebuild. This is really annoying and forced me to reload the page every time.

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

回答by jmojico

The new version of chrome developer shows where it is inherited from.

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

回答by davidreedernst

I'm answering long after the question already has many correct answers because I encountered a different case of having a block of CSS code greyed out and uneditable in Chome DevTools: The block in question contained U+200B ZERO WIDTH SPACE characters. Once I found those and removed them, I could edit the block in Chrome DevTools again. Presumably this might happen with other non-ascii characters as well, I haven't tried to figure that out.

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