Chrome developer tools Style tab showing faded CSS definition, why?

问题

I've been using Chrome for a long time now and I've never (well not that I can recall) come across CSS definitions in the Style panel that are faded. The selector hasn't been defined else where.

Example:

(Edit: Just to be clear, I'm not referring to the user agent stylesheet)

I can't figure out why it is faded and what this means. The definition appears to be editable but any changes to the values do not persist (i.e. as soon as I click off, it reverts back to original value) and has no effect on the web page.

I couldn't find any reference to this in the documentation for the tool. Can any of you kind folk shed any light on this?

回答1:

The "faded" styles are ones that are not applied to the selected tag. So in your screenshot, you have an h1 rule which is normal colored -- that one is applied to whatever element you have selected -- and you have an .SubHeader h1 rule that is not being applied to the selected element.

You'll sometimes see this if you dynamically add a CSS rule (the + button in the chrome dev tools) but modify the selector so it doesn't apply to whichever element you have selected.

回答2:

It means that the rule has been inherited:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

回答3:

Rules that are faded are not applied to the element.

Take a look at this example

<!-- HTML -->
<div>
  <span>Test</span>
</div>

/* CSS */
div {
  color: #F0F;
  margin: 15px;
  stroke: #FFF;
  float: left;
}

If you open dev tools, you will notice that margin and float are faded, color and stroke are not. That is because span element inherited style rules from its parent, but only color and stroke rules are inheritable.

dev tools

回答4:

These are the stylesheets that are applied automatically by the browser.

You can see this by the description: user agent stylesheets.

You can disable this in the setting in the lower right corner by checking Show user agent styles. Now the styles won't be shown in your CSS panel (but are still being applied!)

EDIT:

i misread your question, the dev doc says the following about dimmed rules:

Note: If you edit the selector so that it will not match the selected element, the rule will turn dimmed and obviously, will not be applied to the element. You should rarely need to do this.

Your screenshot looks like this could have been the case.

来源：https://stackoverflow.com/questions/12784001/chrome-developer-tools-style-tab-showing-faded-css-definition-why

标签

css

google-chrome

styles