请注意,not是样式面板(我知道在该上下文中灰显是什么意思-不适用),但是下一个面板是计算(computed)属性面板.

当计算的属性显示为灰色时意味着什么?

例子:

enter image description here

推荐答案

注:这个答案没有确凿的证据,它是基于我一段时间以来的观察得出的.

默认情况下,灰色计算(computed)属性为neither,继承属性为nor.这仅发生在未为元素定义的属性上,但根据运行时布局渲染从其子元素或父元素计算的属性上.

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

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

enter image description here

在该特定示例中,height是根据<p>的子文本 node (字体大小加行高)计算的,width是根据其父<div>的宽度计算的,该宽度也是从其父<body>计算的.


好吧,我又想了想,这是我的opinion based个答案.稍后我真的应该go 看看Chromium源代码:D

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

enter image description here

在这里,您可以追溯到每个定义,甚至包括浏览器内置规则,并使用CSS级联(覆盖)机制进行判断.

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

如果选中Show all,则会显示更多灰色属性.这些也没有在任何地方定义.但与前面的截图不同的是,这些是not runtime calculated-它们是CSS规范的默认值.

enter image description here

Css相关问答推荐

通过使溢出的子元素具有其宽度的100%来防止Flex元素溢出

NextJs - Tailwind css类样式未应用于响应屏幕

VueJS CSS动画不会扩展到v-card/v-col之外

Firefox中的解决方法:has(不使用JavaScript)

如何将动态参数从react tsx文件发送到css

应用边框半径的 iframe 在 4 个角上有细曲线

每当键盘在react native 中打开时,如何使用 KeyboardAvoidingView 删除图像?

如何在 TypeScript 文件中导入 CSS 模块?

在 CSS 中如何使用 100% 和最大内容之间的最大值

CSS:菜单图标动画

有条件地覆盖 CSS 中的 AntD Select 样式

CSS和 Select 器 - 我可以 Select 具有多个类的元素吗?

弹性盒项目之间的间距

如何使用 Bootstrap 3 阻止按钮保持压抑状态

水平列表项

以原始大小的 50% 显示图像

如何使用 Bootstrap2 使 div 居中?

在 react-native 中使用 flex 使项目粘在底部

使用 CSS 更改
高度

从 textarea 中删除所有样式(边框、发光)