Chrome 开发工具在灰色背景上显示 CSS 规则。为啥？
Posted
技术标签:
【中文标题】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 这完全是一个不同的问题。 【参考方案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 方法）。
【讨论】：
以上是关于Chrome 开发工具在灰色背景上显示 CSS 规则。为啥？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以找到导致规则在 Chrome 检查器中显示为灰色值的父 CSS？