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

后端 未结 8 2307
夕颜
夕颜 2020-11-28 20:08

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

8条回答
  •  醉话见心
    2020-11-28 20:54

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

提交回复
热议问题