CSS provides a formula for determining a style’s specificity that’s based on a value assigned to the style’s selector—a tag selector, class selector, ID selector, and so on. Here’s how the system works:
- A tag selector is worth 1 point.
- A class selector is worth 10 points.
- An ID selector is worth 100 points.
- An inline style (page 39) is worth 1,000 points.
The bigger the number, the greater the specificity. So say you create the following three styles:
- a tag style for the <img> tag ( specificity = 1)
- a class style named .highlight (specificity = 10)
- an ID style named #logo (specificity = 100)