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

Posted 2023-02-22

【中文标题】Chrome 开发者工具样式选项卡显示褪色的 CSS 定义，为啥？

【英文标题】：Chrome developer tools Style tab showing faded CSS definition, why?Chrome 开发者工具样式选项卡显示褪色的 CSS 定义，为什么？

【发布时间】：2012-09-28 20:06:53

【问题描述】：

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

例子：

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

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

我在该工具的documentation 中找不到对此的任何引用。有哪位好心人能解释一下吗？

【问题讨论】：

在问了这个问题将近 6 年后，我现在注意到我遇到的问题在更高版本的 Chrome 中得到了修复。下面收到的关于它为什么褪色的答案似乎是正确的，但就我而言，我无法弄清楚它为什么会发生。结果在示例中的 CSS 之前的定义中是无效的 CSS。 （见：jsfiddle.net/bdfEV）。小提琴中的示例在当前版本的 Chrome 中不再显示为淡入淡出（现在似乎允许在链接选择器中使用空格，例如“a：hover”）。

【参考方案1】：

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

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

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

编辑：

我误读了您的问题，开发文档中关于暗色规则的内容如下：

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

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

【讨论】：

为什么它会在它们旁边显示 Site.css 作为源？

mmh 不，它们在“匹配的 CSS 规则”下，您所说的“计算样式”也有阴影，但这不是 OP 所说的。

mmh 不，h1s 的默认颜色不是#7F7F7F

您好 Christoph，正如其他人所指出的，我了解用户代理样式。也许我不清楚，但我指的是我自己的样式表（Site.css）中的样式，这些样式是阴影/褪色的。

@Christoph 我很欣赏你所说的，但在截取屏幕截图时我没有在浏览器中编辑任何内容，如果我这样做了，我可以理解褪色的原因，但这是加载的。

【参考方案2】：

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

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

【讨论】：

Chrome 是否会显示一个元素的规则，即使它与它的选择器不匹配？如果是这样，那就太奇怪了……

Chrome 允许您动态添加和修改 CSS 规则。如果您碰巧添加了与所选元素不匹配的规则 - 或者如果您修改现有规则以使选择器不再匹配所选元素 - 它将显示为灰色。

我按照你所说的 Roddy 但是，有问题的样式 (.SubHeader h1) 没有被动态添加（即它在样式表中并且肯定是有效的（即按照定义的样式） .所以它正在应用中，只是Chrome不允许我修改它。

您是否尝试重新启动 Chrome？有时我会无缘无故地发生这种情况——Chrome 只是自发地决定它不会让我编辑特定的 CSS 规则。

嗨，Christoph，我已经设法重新创建它，并在此过程中发现了可能导致它的原因，但不能 100% 确定。我发现在同一个样式表中定义了一些无效的 CSS，这可能会导致问题。见这里：jsfiddle.net/bdfEV

【参考方案3】：

表示规则已被继承：

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

【讨论】：

正确——但这也意味着该样式不适用于当前选定的元素。

【参考方案4】：

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

Take a look at this example

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

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

如果您打开开发工具，您会注意到 margin 和 float 已褪色，color 和 stroke 没有。那是因为span元素继承了其父元素的样式规则，但只有color和strokerules are inheritable。

【讨论】：

这是最准确的答案，或者至少是给出最佳解释的答案。