Chrome 开发工具在灰色背景上显示 CSS 规则。为什么？答案

【问题标题】：Chrome dev tools showing a CSS rule on a grey background. Why?Chrome 开发工具在灰色背景上显示 CSS 规则。为什么？
【发布时间】：2018-02-01 04:38:28
【问题描述】：

要明确一点 - 我不是在谈论属性被“变灰”或被删除；这是正常显示的整个 CSS 规则，但在灰色背景上。其他应用的规则正常显示，没有灰色背景。有谁知道灰色背景是什么意思？

我要问的原因是，尽管属性没有变灰或删除，但似乎没有应用该规则。我希望灰色背景很重要，并且这种意义可以解释为什么没有应用该规则。

编辑
我被告知我应该编辑这个问题，以明确为什么它不是上述问题的重复。我只能重复一遍，我不是在询问灰色属性；我问的是显示在灰色背景上的 CSS 规则。这就是我在上面的原始问题中指定的内容。如果您查看该问题的已接受答案，您会看到用户在询问有关灰色 CSS 属性的问题（否则他为什么会接受该答案？）
有人可以删除“重复”引用吗？

【问题讨论】：

灰色框是否显示：“用户代理样式表”？你能添加一张显示灰色框的图片吗？
@Paulie_D：让你想知道这是否与他们在该问题 10 months ago 下的评论中提出的问题相同。 编辑：不，不是。
只是为了确认这确实不是上面提到的问题的重复。正如我明确指出的，这与灰色属性无关。这是显示在灰色背景上的 CSS 规则。现在附上图片。如您所见，一个标记为“用户代理样式表”，而另一个标记为“style..style”。任何帮助，非常感谢。
您指的是图像中的哪个灰色区域，是“用户代理样式表”还是“style..style”？
@Paulie_D 这完全是一个不同的问题。

标签： css google-chrome

【解决方案1】：

根据old Chrome Developer site：

对于当前选中的 DOM 节点，此窗格显示适用于该节点的所有样式。灰色背景的样式是只读的，其余的都是可编辑的。

旧网站建议我访问new Chrome Dev Tools site，但唯一看起来相似/相关的语言不太清楚：

在“样式”窗格中实时编辑样式属性名称和值。所有样式都是可编辑的，除了灰显的样式（就像用户代理样式表一样）。

所以那些灰色的样式是不可编辑的，我猜是因为它们是你的用户代理样式表中这些元素的默认样式。

【讨论】：

感谢您的回答。很高兴知道这些样式不可编辑。但是有问题的规则是在外部样式表中定义的。我真的很想知道为什么这些样式 a) 不可编辑并且 b) 没有被应用。
@moosefetcher 为了确定不应用规则的原因，我们需要查看minimal reproducible example。但除非 Chrome 有错误，否则样式如果没有被删除，就会应用。
无论是否应用样式，为什么将规则（在自定义外部 css 文件中定义）描述为样式...样式？我刚刚遇到了另一个例子，我真的很想知道规则的行号，因为我想编辑它。 Chrome 为什么（以及在哪里）“隐藏”行号？
@moosefetcher 如果你有一个外部样式表，我不确定为什么 Chrome 将它列为出现在 <style> 内的 <head> 元素中。您是通过<link> 还是通过其他方法包含它？但是如果您知道确切的样式和属性，您可以在外部工作表中按 Ctrl+F 查找行号/样式吗？
好吧，它神秘地不再这样做了。是的，我确定它是（我也展示了一位同事）。项目中的所有文件都在开发服务器上。我找到了行号，编辑了规则。可想而知没有奏效。有时我讨厌网络开发。

【解决方案2】：

由于a bug/deficiency（重新打开here），灰色背景的条目不可编辑：Chrome 的开发工具无法编辑动态创建的 CSS 规则（例如，通过 insertRule 方法）。

【讨论】：