Chrome developer tools some styles from CSS file grayed out/uneditable?

问题

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 file:

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

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

回答1:

Ok, this seems to happen because my HTML/CSS is in an iframe and I only reload the iframe. When I hard-reload the whole page, the class is not grayed out anymore. Maybe Chrome loses the context, if some of the code comes from the cache.

回答2:

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.

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

回答3:

That is actually style coming from the browser itself, default values and that's why you can't edit it.

That's what user agent stylesheet means. See also What is user agent stylesheet for details.

回答4:

Have a look if you have an error somewhere. I had an error in the command line as I started my app via npm start, then chrome dev tools had the same problems that you are describing with .result_text {...}. And try to check Disable Cache in the settings of Chrome dev tools.

来源：https://stackoverflow.com/questions/38201898/chrome-developer-tools-some-styles-from-css-file-grayed-out-uneditable

标签

css

google-chrome

developer-tools