When the selectors are identical,
or have the same importance,
the rule that comes later wins.
But what happens with different
selectors like in the example given below:
Though the rule color: red
appears later in the code,
the rule color: purple
is used.
This is because, an ID selector
is more specific than a
class selector. The rule
from a more specific selector
is used. Here #p1
is
said to have a higher Specificity.
Let's look at another similar example:
A class selector has a
higher specificity than an
element selector, which is
why the color: red
is applied. The
rule with higher specificity will
get applied.