What is Specificity?

Specificity determines by which a browser decides which CSS property values are the most relevant to an element. It is believed that the longer the selector is the more powerful are its css rules, which is dramatically wrong.

Any examples?

Sure, here's a jsfiddle example that illustrates how 6 'class' selectors can't beat a single 'id' selector.

Great, but how this game can help me?

On the right you have the 'Info' widget that shows the number of points each type of selector has.

On the left you have 3 teams fighting for the 'Trophy'. Wins the team that colors the 'Trophy' in theirs own color. Team A is trying to color it in 'green', team B is trying to color it in 'red' and team C is trying to color it in 'purple'.

Lower you have the 'Statistics' bar that shows which team is dominating.

Lower on the left you have the 'HTML' widget which contains the code that should be styled by those 3 teams.

Followed by the 'CSS' widget where the CSS code is generated. It's generated each time any team applies new selectors.

The 'Result' widget renders the HTML and the CSS and shows who's the winner by being colored in the corresponding team's color.

How do I start?

Start by applying CSS selectors and watch for the changes within the widgets. Changes like the total points of each team, statistics, CSS and HTML code and of course the winner.

What if I want to know more about the CSS specificity?

There are bunch of wonderful articles around the web on this topic. I would recommend reading the SmashingMagazine's article and the CSSTricks' article. If you want to know even more, then just Google it.