css - Chrome 开发人员工具 CSS 文件中的某些样式变灰/无法编辑？

Question

我在 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”中。

Answer 1

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

要指出的另一件事是，当我从“源”选项卡观察 css 文件时，css 文件显示为完全为空。当我看到它时，我能够在以下论坛帖子中找到有关空 url css 规则的信息 https://groups.google.com/forum/#!topic/google-chrome-developer-tools/Z_TLvpOXrMg