Board Thread:Support Requests - Getting Technical/@comment-188432-20130117043539/@comment-5209426-20130118165827

Calculating Specificity
To calculate specificity, look at each component of the selector and add the following numbers together:
 * For every tag (e.g. "div", "a", "span"), add 1
 * For every class (e.g. ".wikia-menu-button"), add 256
 * For every id (e.g. "#WikiaMainContent"), add 65536

If you have 2 selectors targeting the same element, the one with the bigger number wins.

Tie breaking

 * If two selectors target the same element and have the same specificity then the one that occurs second in text order overrides the first.
 * E.g.  and   both target the same element with the same specificity (=3) so the whichever one is second will override the other.

Caveats

 * Inline styles have maximum specificity.
 * styles are locked, they can only be overwritten by other styles which are also using . Because of this,   should always be avoided except in a very few rare edge-cases since they effectively disable the entire cascading concept for the affected properties.

Stuff I left out
Some Pseudo-classes also have an effect on specificity; I don't remember how much and which ones off the top of my head though.

Example
Therefore,  wins.
 * has specificity 256
 * has specificity 512

More examples:
 * has specificity 257
 * has specificity 65793
 * has specificity 65795