我正在使用 Google Chrome 的元素检查器检查网页上的 h2 元素，一些 CSS 规则(似乎已应用)显示为灰色。看起来删除线表示规则被覆盖了，但是样式变灰是什么意思呢？
最佳答案
对我来说，当前的答案没有充分解释问题，所以我添加了这个答案，希望对其他人有用。
灰色/变暗文本，可以表示任一个
- 这是浏览器应用的默认规则/属性，其中包括默认的简写属性。
- 涉及到继承，稍微复杂一点。
继承
注意:Chrome 开发工具的“样式”面板将显示一个规则集，因为该集中的一个或多个规则正在应用于当前选定的 DOM 节点。 我想，为了完整起见，开发工具显示了该集中的所有规则，无论它们是否被应用。
如果规则由于继承而应用于当前选定的元素(即规则应用于祖先，并且选定的元素继承了它)，chrome 将再次显示整个规则集。
应用于当前选定元素的规则以普通文本显示。
如果规则存在于该集合中但未应用，因为它是不可继承的属性(例如背景颜色)，它将显示为灰色/灰色文本。
这里有一篇文章给出了很好的解释 - (注意:相关元素在文章底部 - 图 21 - 不幸的是相关部分没有标题) - http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033
文章摘录
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 - 当 CSS 规则在 Chrome 的元素检查器中显示为灰色时，这意味着什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3265555/