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

Question

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

Answer 1

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

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

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

遗产

注意：Chrome开发者工具的“样式”面板将显示一个规则集，因为该集中的一个或多个规则将应用于当前选定的DOM节点。我想，出于完整性考虑，无论是否应用，开发人员工具都会显示该集合中的所有规则。

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

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

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

这是一篇提供了很好解释的文章-注意：相关项目位于文章的底部-图21-不幸的是相关部分没有标题

文章摘录

由于默认的速记属性，这种[继承场景]有时会造成一些混乱。图21说明了font属性的默认速记属性以及非继承属性。只是在检查元素时要注意的是上下文。