Styles are read in three ways: browser default (blue links etc), style sheets (internal in the <head> or external via @import or <link>) and inline styles. Here is the simulated default priority order, where no.4 as most important:
- Browser default
- External style sheet
- Internal style sheet
- Inline style
Let me try to explain how this works. If two rules have the same weight, the latter wins.
Now, let’s make a general list of the internal priorities for CSS (3 has the highest priority):
- element
- .class
- #id
This is the default priority order. In addition to this, specificity will also count, f.ex ul li will override li. W3C has made a decent table over how you should calculate internal weight:
LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#list {...} /* a=1 b=0 c=0 -> specificity = 100 */
- a represents the number of #id attributes in the selector
- b represents the number of class attributes
- c represents the number of tag names
more detailed information available here …
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
