What is Specificity?
If there are two or more CSS rules that point to the same element, the selector with the highest specificity will "win", and its style declaration will be applied to that HTML element.
Think of specificity as a hierarchy that determines which style declaration is ultimately applied to an element.
In this example, we used a class selector called "test" and set its color to green. Even though the paragraph element ("p") is also given a red color, the text appears green because the class selector takes precedence due to its higher specificity.
look at example 2:
In this example, we used an ID selector named "demo". As a result, the text appears blue because the ID selector has a higher specificity and overrides other styles.
look at example 3:
In this case, we applied an inline style directly to the
element. As a result, the text appears pink because inline styles have the highest specificity and override all other CSS rules.