当前位置:  开发笔记 > 前端 > 正文

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

如何解决《当ChromeDevTools显示计算属性为灰色时,这意味着什么》经验,为你挑选了1个好方法。

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

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

例:

在此输入图像描述



1> Leo..:

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

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

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


asdf

在此输入图像描述

在这个特定的例子中,height

子节点计算- 文本节点(字体大小加行高),width是根据父节点

的宽度计算的,宽度也是从父节点计算出来的.


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

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

在此输入图像描述

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

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

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

在此输入图像描述


那讲得通。其他详细信息:灰色的属性无法单击,其他属性也无法单击,以在特定声明中显示其值的来源。
推荐阅读
农大军乐团_697
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有