CSS Resolution Rules and Specificity


The css property doesn’t take effect in the release build but works fine in the debug build.

Root cause

We applied two css classes in one dom node and didn’t specify the priority (have the same css specificity (0,1,0)), thus the CSS class order matters: the latter one will override the previous one.

However, the css class order is not stable between the debug and release builds.


After fixing, the classes are like this:


We can use the scss file helper tools in VS Code:


Caution while nesting & :



When two rules from the same cascade layer apply and both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.

There are three factors to consider, listed here in increasing order of importance. Later ones overrule earlier ones:

Source order


  • one identifier selector has 1-0-0 specificity
  • one class selector (attribute selector) has 0-1-0 specificity
  • one element selector has 0-0-1 specificity
  • The specificity weight of :not/:is/:has comes from the selector parameter in the list of selectors with the highest specificity.
  • Combinators, such as +, >, ~, “ ”, and ||, may make a selector more specific in what is selected but they don’t add any value to the specificity weight.



  • inline style
  • !important: DO NOT use !important. It makes the CSS hard to maintain and debug.
    • See a demo for !important here.

Other info

The VS Code should have issues with “specificity” calculation.


The specificity should be 0-2-0.

More examples can be seen from here: Specificity


Some online css specificity calculator can be used for testing:

Specificity Calculator

How to avoid such issues?

  • Make sure all the loaded CSSs have different css specificity.
  • Review the CSS in the developer tool.
  • For a specific css property, filter out all CSSs which contains it.
  • Make sure the CSS you want to apply have the highest css specificity.