Chrome开发人员工具可以将CSS文件中的某些样式显示为灰色/无法编辑? [英] Chrome developer tools some styles from CSS file grayed out/uneditable?

问题描述

我在Chrome开发者工具中发现了许多有关灰色样式的问题，但没有一个问题描述了我的奇怪行为.我在CSS文件中有普通的类样式.由于某些原因，我可以编辑其中一个，但不能编辑另一个

I found lots of questions regarding the grayed out styles in Chrome developer tools, but none that describes the strange behavior I have. I have plain class styles in a CSS file. For some reason I can edit one of them, but not the other:

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"中.

As you can see in the screenshots, I can edit the div class="result_image", but not the div class="result_text". I think the problem has something to do with Chrome claiming that the grayed out style comes from a style-tag, but both styles are in the file "qb1.core.css".

推荐答案

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

This happened to me without any iFrame. It turns out that there was a style in my stylesheet giving the background to a particles.js area an empty url. Basically, it said: background-image: url(''); - this was in a completely unrelated area of the css file, but as soon as I commented it out and refreshed the page I could edit the css from developer tools and it showed as coming from the css file, not from a style tag.

要指出的另一件事是，当我从源"选项卡观察css文件时，css文件显示为完全空.看到该消息后，我可以在以下论坛帖子

Another thing to point out is that when I observed the css file from the Sources tab the css file showed as completely empty. When I saw that, I was able to find the info about the empty url css rule at the following forum post https://groups.google.com/forum/#!topic/google-chrome-developer-tools/Z_TLvpOXrMg

这篇关于Chrome开发人员工具可以将CSS文件中的某些样式显示为灰色/无法编辑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！