当 CSS 规则在 Chrome 的元素检查器中变灰时，这意味着什么? [英] What does it mean when a CSS rule is grayed out in Chrome's element inspector?
问题描述
我正在使用 Google Chrome 的元素检查器检查网页上的 h2 元素，并且一些 CSS 规则(似乎已应用)显示为灰色.删除线似乎表示规则已被覆盖，但样式变灰是什么意思?
I'm inspecting an h2 element 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?
推荐答案
对我来说，目前的答案并没有充分解释这个问题，所以我添加了这个答案，希望对其他人有用.
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
- 这是浏览器应用的默认规则/属性，包括默认的简写属性.
- 它涉及到有点复杂的继承.
继承
注意:Chrome 开发工具的样式"面板将显示一个规则集，因为该集中的一个或多个规则正在应用于当前选定的 DOM 节点.我想，为了完整起见，开发工具会显示该集合中的所有规则，无论是否应用.
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 将再次显示整个规则集.
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.
应用于当前选定元素的规则以普通文本显示.
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.
这里有一篇文章给出了很好的解释-(注意:相关项目在文章底部-图21-不幸的是相关部分没有标题)-http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
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 说明了默认的简写字体属性的属性以及非继承的特性.请注意您正在查看的上下文检查元素.
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.
这篇关于当 CSS 规则在 Chrome 的元素检查器中变灰时，这意味着什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
