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 =＆＃34; result_image＆＃34;，但不能编辑div class =＆＃34; result_text＆＃34;。我认为问题与Chrome有关，声称灰色样式来自样式标记，但这两种样式都在文件＆＃34; qb1.core.css＆＃34;。

Answer 1

好吧，这似乎发生了，因为我的HTML / CSS在iframe中，我只重新加载iframe。当我重新加载整个页面时，课程不再灰显。如果某些代码来自缓存，Chrome可能会丢失上下文。

Answer 2

没有任何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找到有关空网址css规则的信息

Answer 3

这实际上是来自浏览器本身的样式，默认值以及您无法编辑它的原因。

user agent stylesheet的含义。有关详细信息，另请参阅What is user agent stylesheet。

Answer 4

看看您是否在某处出错。通过npm start启动应用程序时，命令行出错，然后chrome开发工具遇到了与您在.result_text {...}中描述的问题相同的问题。并尝试在Chrome开发者工具的设置中选中“禁用缓存”。