Frontend & browser·Layout, CSS and the cascade
your new rule does nothing until you nest it one level deeper, and now it wins.
Specificity
A three-part score — ids, then classes and attributes and pseudo-classes, then elements — compared left to right to break a tie between rules. It is not a single number, so a hundred classes never beat one id, and adding a selector to win is how a stylesheet ends up with rules nobody dares delete. It only comes into play after origin and layer have already been decided, which is why a rule in a later layer can win with a much lower score.