Why does the hover pseudo-class override the active pseudo-class

Question

The title basically says it all.

Suppose I have an element which I want to change color on :hover, but while clicked, I want it to swit

Answer 1

Because in the first code you defined :hover after you defined :active, so :hover "overwrote" :active. In the second, it's the other way around, :active overwrites :hover.