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规范的默认值。