Chrome开发者工具显示CSS规则的背景为灰色。为什么？

Question

Chrome开发者工具显示CSS规则的背景为灰色。为什么？

5

只是为了明确 - 我不是在谈论属性被“灰化”或划掉; 这是整个CSS规则以正常方式显示，但在灰色背景上。其他应用的规则会正常显示，没有灰色背景。有人知道灰色背景的含义吗？

我问的原因是，尽管属性没有被灰化或划掉，但规则似乎并未得到应用。我希望灰色背景是重要的，并且这种重要性可能解释为什么规则未被应用。编辑
有人告诉我应该编辑问题，以清楚说明为什么它不是上面问题的重复。我只能重申，我不是在问灰色属性; 我在问显示在灰色背景上的CSS规则。那就是我在原始问题中指定的内容。如果您查看那个问题的已接受答案，您将看到用户正在询问灰色的CSS属性（否则他为什么会接受那个答案？）
有没有人可以删除“重复”参考？

- moosefetcher

1

灰色的框中是否显示“用户代理样式表”？您能添加一张显示灰色框的图片吗？ - caramba

@Paulie_D: 这让你想知道是否是在那个问题的评论下问过同样的问题10个月前。编辑： 不是。 - BoltClock

只是确认这确实不是上面提到的问题的重复。正如我明确说明的那样，这不是关于灰色属性的问题。这是在灰色背景上显示的CSS规则。现在附上图片。正如您所看到的，其中一个被标记为“用户代理样式表”，但另一个被标记为“style..style”。任何帮助都将不胜感激。 - moosefetcher

你所指的图像中的灰色区域是哪一个，是'user agent stylesheet'还是'style..style'？ - j08691

@Paulie_D 这完全是一个不同的问题。 - TylerH

显示剩余2条评论

2个回答

2

根据旧版Chrome开发者网站的说法：

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

旧版网站建议我访问新版Chrome Dev Tools网站，但唯一看起来类似/相关的语言稍微不太清晰：

在样式窗格中实时编辑样式属性名称和值。除了用户代理样式表中灰色的样式之外，所有样式都可以编辑。

因此，那些灰色的样式是不可编辑的，我的猜测是因为它们是来自您的用户代理样式表的元素的默认样式。

- TylerH

2

谢谢您的回答。知道这些样式不可编辑是很好的。但是，所讨论的规则是在外部样式表中定义的。我真的很想知道为什么这些样式a)不能被编辑和b)没有被应用。 - moosefetcher

@moosefetcher 为了确定规则未被应用的原因，我们需要查看一个 MCVE。但是除非 Chrome 存在 bug，否则如果样式没有被删除线穿过，则已经应用了它们。 - TylerH

1

无论样式是否应用，为什么在自定义外部CSS文件中定义的规则被描述为style...style？我刚刚又遇到了这种情况，真的很想知道规则的行号，因为我想编辑它。为什么（以及在哪里）Chrome会“隐藏”行号？ - moosefetcher

如果您有一个外部样式表，我不确定为什么Chrome将其列在<style>元素内的<head>中。您是通过<link>，还是其他方法包含它呢？但如果您知道确切的样式和属性，可以在外部样式表中使用Ctrl+F查找行号/样式吗？ - TylerH

2

好吧，现在神奇地不再这样了。是的，我确定它曾经那样（我也向同事展示过）。该项目中的所有文件都在开发服务器上。我找到了行号，编辑了规则。可预料的是，没有起作用。有时候我真讨厌网页开发。 - moosefetcher

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wOxxOm · Accepted Answer

那些灰色背景的条目由于一个错误/缺陷（在此重新开启），无法进行编辑：Chrome的devtools无法编辑动态创建的CSS规则（例如通过insertRule方法创建的规则）。最初的回答。