当 Chrome 开发工具显示计算属性为灰色时，这意味着什么

请注意，没有的样式面板(我知道在这种情况下灰色的意思ーー不适用) ，但下一个面板，计算属性面板。

当计算属性显示为灰色时，这意味着什么？

例如:

enter image description here

21927 次浏览
小开
最佳答案

注意: 这个答案没有确凿的证据，它是基于我一直以来的观察。

灰色计算属性是 都不是默认值，也没有继承。这只发生在没有为元素定义但是根据其子元素或基于运行时布局呈现的父元素计算的属性上。

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

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

enter image description here

在这个例子中，height是从 <p>的子节点-文本节点(字体大小加上行高)计算出来的，width是从它的父节点-<div>的宽度计算出来的，<div>的宽度也是从它的父节点 <body>计算出来的。

编辑: 我又想了想，这是我的 基于观点答案。我真的应该稍后去看一下 Chromium 源代码: D

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

enter image description here

在这里，您可以追溯到每一个定义，甚至包括浏览器内置的规则，并检查与 CSS 级联(覆盖)机制。

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

如果选中 让所有人看看，将显示更多的灰色属性。这些也没有在任何地方定义。但是与之前的截图不同，这些是 不是运行时计算-它们是 CSS 规范的默认值。

enter image description here


提交答案