Chrome开发人员工具的样式标签显示CSS定义已褪色，为什么？ [英] Chrome developer tools Style tab showing faded CSS definition, why?

问题描述

我使用Chrome已有很长时间了，但从来没有（我想不起来）在样式面板中没有淡出的CSS定义。选择器尚未在其他位置定义。

示例：

（编辑：为了清楚起见，我指的不是用户代理样式表）

<我不知道为什么它褪了色，这意味着什么。该定义似乎是可编辑的，但是对值的任何更改都不会持久（即，一旦我单击鼠标，它就会恢复为原始值），并且对网页没有任何影响。

我在文档。你们中的任何一个人都能对此有所了解吗？

解决方案

褪色样式是一种不适用于选择的标签。因此，在屏幕截图中，您有一个 h1 规则，该规则为正常颜色-该规则应用于您选择的任何元素-并且您有 .SubHeader h1 规则，该规则未不应用于所选元素。

有时，您会看到如果您动态添加CSS规则（chrome开发工具中的+按钮）但修改了选择器，则该选择器将不适用于您选择的任何元素。

I've been using Chrome for a long time now and I've never (well not that I can recall) come across CSS definitions in the Style panel that are faded. The selector hasn't been defined else where.

Example:

(Edit: Just to be clear, I'm not referring to the user agent stylesheet)

I can't figure out why it is faded and what this means. The definition appears to be editable but any changes to the values do not persist (i.e. as soon as I click off, it reverts back to original value) and has no effect on the web page.

I couldn't find any reference to this in the documentation for the tool. Can any of you kind folk shed any light on this?

解决方案

The "faded" styles are ones that are not applied to the selected tag. So in your screenshot, you have an h1 rule which is normal colored -- that one is applied to whatever element you have selected -- and you have an .SubHeader h1 rule that is not being applied to the selected element.

You'll sometimes see this if you dynamically add a CSS rule (the + button in the chrome dev tools) but modify the selector so it doesn't apply to whichever element you have selected.

这篇关于Chrome开发人员工具的样式标签显示CSS定义已褪色，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！