What does it mean when a CSS rule is grayed out in Chrome's element inspector?

Question

I\'m inspecting an h2 element on a web page using Google Chrome\'s element inspector and some of the CSS rules--which appear to be applied--are grayed out. It

Answer 1

When using webpack, any css rule or property that has been changed in the source code is grayed out when the page reloads after a rebuild. This is really annoying and forced me to reload the page every time.

Answer 2

It means the rule has been replaced with another rule with higher priority. For example stylesheets with:

h2 {
  color: red;
}
h2 {
  color: blue;
}

The inspector will show the rule color:red; grayed out and color:blue; normally.

Read up on CSS inheritance to learn which rules are inherited/have higher priority.

EDIT:

Mixup: the grayed out rules are the unset rules, which use a special default stylesheet that is applied to all elements(the rules that make the element renderable, because all styles have to have a value).