CSS Child / The Cascade

Specificity is the usual culprit, and it is countable.

The tie break that decides most contests is a simple measure of how precisely a rule identifies its target.

When two rules want to set the same thing on the same element, the first tie break is not which one you wrote most recently. It is which one describes its target more precisely. A rule aimed at every element of a certain kind is a broad claim. A rule aimed at everything carrying a particular label is narrower. A rule aimed at one uniquely identified thing is narrower still. The browser scores these categories, and the categories do not trade against each other: any number of broad claims will never outweigh a single narrower one. Adding general rules to defeat a specific one therefore fails however many you add. Only when two rules are equally precise does position decide, and then the later one wins.

That last point deserves emphasis, because it is the shape of a very common afternoon. You write a rule. It does not apply. You write another. It does not apply either. You write six more, increasingly desperate, and none of them apply, and you conclude that the system is capricious. It is not. Every one of your rules is scoring in a category that has already been outranked. You could write a thousand and the outcome would be identical. The way out is not more force in the same category, it is understanding which category the winner is in.

The practical response is usually to make your own rule more precise rather than to reach for anything drastic. There is a way to declare a rule as an absolute override, ignoring the contest entirely, and beginners find it and love it because it works instantly. Please resist it. It works by breaking the model rather than participating in it, and a page with several of these overrides becomes genuinely unpredictable, because the only way to beat one is another, and now you have an arms race with no ceiling and no way to reason about the result.