Why Are Some CSS Properties Crossed Out in Chrome DevTools?

Crossed-out CSS Properties in Chrome DevTools: Uncovering the Reason

When inspecting HTML elements in Chrome's devtools, you may encounter crossed-out CSS properties in the "Styles" pane. These crossed-out properties indicate a specific behavior that sheds light on the element's styling.

Meaning of Crossed-out Properties

Crossed-out properties signify that the underlying style was initially applied but subsequently overridden by a more specific selector, a more local rule, or a later property within the same rule. This behavior occurs because CSS rules are applied in order of specificity and precedence.

Special Cases

In addition to the aforementioned reasons, crossed-out properties can also indicate the following special cases:

• Commented-out Styles: Styles that exist in a matching rule but are commented out.
• Manually Disabled Styles: Styles that have been manually disabled by unchecking them within the Chrome developer tools.
• Syntax Errors: Styles that contain syntax errors, indicated by an error icon next to the crossed-out text.

Example

Consider the following example:

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

In Chrome devtools, inspecting the "my-div" element would show "background-color: white" crossed out. This indicates that the initial white background color was overridden by the subsequent blue background color specified for divs with id "my-div."

The above is the detailed content of Why Are Some CSS Properties Crossed Out in Chrome DevTools?. For more information, please follow other related articles on the PHP Chinese website!