When two or more rules of style conflict, the type of selector is used to determine the winner. The more specific the selector, the more weight it is given to override conflicting declarations.
Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
How to Calculate Specificity?
Memorize how to calculate specificity!
Start at 0, add 1000 for style attribute,
add 100 for each ID,
add 10 for each attribute, class or pseudo-class,
add 1 for each element name or pseudo-element.
Consider these three code fragments (the target is h1):
A: <h1>Heading</h1>
B: <div id="content"><h1>Heading</h1></div>
C: <div class="header-paragraphs"><div id="content"><h1>Heading</h1></div></div>
D: <div class="header-paragraphs"><div id="content"><h1 style="color: green">Heading</h1></div></div>
The specificity of A is 1 (one element).
The specificity of B is 101 (one ID reference and one element).
The specificity of C is 111 (one class, one ID reference and one element).
The specificity of D is 1111 (one inline style, one class, one ID reference and one element).
Since 1 < 101 < 111 < 1111, the fourth rule (D) has a greater level of specificity, and therefore will be applied.