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

通过展开这些箭头，您可以看到哪些实际规则应用于该元素，在针对它定义的所有规则中（直接或继承，由开发人员或浏览器）：

在这里您可以追踪到每个定义，甚至包括浏览器 built-in 规则，并使用 CSS 级联（覆盖）机制进行检查。

因此，对于那些没有 CSS 定义（没有直接定义，没有继承，没有浏览器 built-in）的元素，你没有任何来源可以追踪。属性值完全是运行时计算的。

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

What does it mean when Chrome Dev Tools shows a computed property greyed out