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

Question

我已经使用 Chrome 很长时间了，而且我从来没有（我不记得）在样式面板中遇到过褪色的 CSS 定义。选择器尚未在其他地方定义。

例子：

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

我无法弄清楚它为什么会褪色以及这意味着什么。该定义似乎是可编辑的，但对值的任何更改都不会持续存在（即，一旦我单击关闭，它就会恢复为原始值）并且对网页没有影响。

我在该工具的文档中找不到对此的任何引用。你们中的任何一个好心人都可以对此有所了解吗？

score 15 · Accepted Answer

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

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

score 14 · Accepted Answer

褪色的规则不会应用于元素。

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

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

如果你打开开发工具，你会注意到margin和float是褪色的，color而stroke不是。这是因为span元素从其父元素继承了样式规则，但只有color和stroke 规则是可继承的。

开发工具

score 8 · Accepted Answer

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

score 4 · Accepted Answer

这些是浏览器自动应用的样式表。

您可以通过描述看到这一点：user agent stylesheets.

您可以通过选中在右下角的设置中禁用此功能Show user agent styles。现在样式将不会显示在您的 CSS 面板中（但仍在应用中！）

编辑：

我误读了您的问题，开发文档对暗淡规则说了以下内容：

注意：如果您编辑选择器使其与所选元素不匹配，则该规则将变暗，并且显然不会应用于该元素。您应该很少需要这样做。

您的屏幕截图看起来可能是这种情况。

4 回答 4