Devido à forma como a cascata CSS funciona, se :focus
preceder :hover
, os estilos de foco irão substituir os estilos de foco .
Em ambos os casos, os :active
estilos não parecem funcionar enquanto o elemento está em foco.
Aqui está uma demonstração do codepen.io para ver o efeito que a ordem das regras tem sobre como os estilos são aplicados.
Mais informações: página de referência do Sitepoint nas classes pseduo