小编典典

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

css

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


阅读 1069

收藏
2020-05-16

共1个答案

小编典典

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

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

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

遗产

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

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

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

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

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

文章摘录

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

2020-05-16