A stylesheet contains, in this order:
.primary { background: blue; }
.btn { background: gray; }
The element is <button class='btn primary'>Save</button>. Which background does it get?
Blue — .primary is written later in the class attribute, and the last class listed on the element wins.
Blue — .primary is the more specific, more purposeful of the two names, so it takes priority over the generic .btn.
The result is undefined — two equally specific rules are a conflict that browsers resolve however they like.
Gray — the selectors have equal specificity, so the declaration that comes later in the stylesheet wins; the order of names in the class attribute is irrelevant.✓Ճիշտ պատասխան
Բացատրություն
Both selectors are a single class, specificity (0, 1, 0), so the tie is broken by document order and the later rule, .btn, wins with gray. The order of names inside the class attribute is not part of the cascade at all — rewriting the element as class='primary btn' changes nothing. To make .primary win you have to change the stylesheet: move it after .btn, or raise its specificity (for example .btn.primary). And the cascade is fully deterministic, so 'undefined' is never the answer.