Chrome开发者工具样式选项卡显示褪色的CSS定义,为什么？

Question

我已经使用Chrome很长一段时间了,我从来没有(我不记得)在样式面板中遇到褪色的CSS定义.选择器还没有定义在哪里.

例:

(编辑:要清楚,我不是指用户代理样式表)

我无法弄清楚为什么它会褪色,这意味着什么.该定义似乎是可编辑的,但对值的任何更改都不会持久(即,一旦我单击关闭,它将恢复为原始值)并且对网页没有影响.

我在该工具的文档中找不到任何对此的引用.你们这些善良的人可以对此有所了解吗？

Answer 1

"褪色"样式是未应用于所选标记的样式.因此,在您的截图,你有一个h1规则,这是正常的着色-一个应用于您所选择的任何元素-和你有一个.SubHeader h1是规则没有被应用到所选元素.

您有时会看到这是您动态添加CSS规则(chrome dev工具中的+按钮),但修改选择器使其不适用于您选择的任何元素.

Answer 2

这意味着该规则已被继承:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

Answer 3

淡入淡出的规则不会应用于该元素。

看这个例子

<!-- HTML -->
<div>
  <span>Test</span>
</div>

/* CSS */
div {
  color: #F0F;
  margin: 15px;
  stroke: #FFF;
  float: left;
}

如果你打开开发工具，你会发现，margin和float正在消退，color而stroke不是。这是因为spanelement从其父项继承样式规则，但only color和stroke rules是可继承的。