Chrome 开发者工具 CSS 文件中的某些样式变灰/不可编辑？答案

【问题标题】：Chrome developer tools some styles from CSS file grayed out/uneditable?Chrome 开发者工具 CSS 文件中的某些样式变灰/不可编辑？
【发布时间】：2016-11-07 04:48:08
【问题描述】：

我在 Chrome 开发者工具中发现了很多关于灰色样式的问题，但没有一个能描述我的奇怪行为。我在 CSS 文件中有简单的类样式。出于某种原因，我可以编辑其中一个，但不能编辑另一个：

CSS 文件：

.result {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

.result_image {
    height: 80%;
    overflow: hidden;
}

.result_text {
    font-size: 13.6px;
    margin-left: 5px;
    font-weight: bold;
    height: 20%;
}

HTML：

<div class="result">
    <div class="result_image"><img src="..."></div>
    <div class="result_text">Some text</div>
</div>

正如您在屏幕截图中看到的，我可以编辑 div class="result_image"，但不能编辑 div class="result_text"。我认为问题与 Chrome 声称灰色样式来自样式标签有关，但两种样式都在文件“qb1.core.css”中。

【问题讨论】：

标签： css google-chrome developer-tools

【解决方案1】：

这发生在我没有任何 iFrame 的情况下。事实证明，我的样式表中有一个样式，为particle.js 区域提供了一个空 url 的背景。基本上，它说：background-image: url(''); - 这是在 css 文件的一个完全不相关的区域，但是一旦我将其注释掉并刷新页面，我就可以从开发人员工具中编辑 css，它显示为来自 css 文件，而不是来自样式标签。

要指出的另一件事是，当我从 Sources 选项卡中观察 css 文件时，css 文件显示为完全为空。当我看到这一点时，我能够在以下论坛帖子https://groups.google.com/forum/#!topic/google-chrome-developer-tools/Z_TLvpOXrMg

中找到有关空 url css 规则的信息

【讨论】：

【解决方案2】：

好的，这似乎是因为我的 HTML/CSS 位于 iframe 中，而我只重新加载 iframe。当我重新加载整个页面时，该类不再灰显。如果某些代码来自缓存，Chrome 可能会丢失上下文。

【讨论】：

这正是我的问题，只发生在已重新加载的 iframe 中。一定是个bug。版本 59.0.3071.109

【解决方案3】：

这实际上是来自浏览器本身的样式，默认值，这就是你不能编辑它的原因。

这就是user agent stylesheet 的意思。详情请参阅What is user agent stylesheet。

【讨论】：

div 样式是这样，但 .result_text 类不是这样，它也是灰显的，但不应该这样。

【解决方案4】：

如果您在某处有错误，请查看。当我通过npm start 启动我的应用程序时，命令行出现错误，然后chrome 开发工具遇到了与.result_text {...} 描述的相同问题。并尝试在 Chrome 开发工具的设置中检查禁用缓存。

【讨论】：