当Chrome Dev Tools显示计算属性为灰色时,这意味着什么

Question

请注意,不是 "样式"面板(我知道在该上下文中灰色表示的内容 - 未应用),而是下一个面板"计算属性"面板.

当Computed属性显示为灰色时,这意味着什么？

例:

Answer 1

注意:这个答案没有确凿的证据,这是基于我当时的观察.

灰色计算属性既不是默认属性,也不是继承属性.这仅发生在未为元素定义的属性上,而是基于运行时布局呈现从其子项或父项计算的.

以这个简单的页面为例,display是默认的并且font-size是继承的:

<style>
  div { font-size: 13px; }
</style>
<div>
  <p>asdf</p>
</div>

在这个特定的例子中,height从<p>子节点计算- 文本节点(字体大小加行高),width是根据父节点<div>的宽度计算的,宽度也是从父节点计算出来的<body>.

编辑:嗯,我想了一下,这是我基于意见的答案.我应该去看看以后的Chromium源代码:D

通过扩展这些箭头,您可以看到应用于该元素的实际规则,以及针对它定义的所有规则(直接或继承,由开发人员或浏览器):

在这里,您可以追溯到每个定义,甚至包括浏览器内置规则,并检查CSS级联(重写)机制.

因此,对于那些没有CSS定义(没有直接定义,没有继承,没有内置浏览器)的元素,您没有任何要跟踪的源.并且属性值完全是运行时计算的.

如果选中"全部显示",则会显示更多灰色属性.这些也没有在任何地方定义.但与之前的屏幕截图不同,这些不是运行时计算的 - 它们是CSS规范的默认值.