Problem
Consider the three code fragments:
// A
h1
// B
#content h1
// C
<div id="content">
<h1 style="color: #fff">Headline</h1>
</div>
What the code fragment has the greater specificy?
The CSS specificity:
A
is0,0,0,1
(one element),B
is0,1,0,1
(one ID reference point and one element),C
is1,0,0,0
(since it is an inline styling).
Since 0001 = 1 < 0101 = 101 < 1000
,
the third rule has a greater level of specificity, and therefore will be applied. If the third rule didn’t exist, the second rule would have been applied.