Note) css 인터랙션 스타일 기억법 "LoVe/HAte"

The cascade is the reason this order matters: given the same specificity, later styles override earlier styles. If two or more of these states are true of one element at the same time, the last one can override the others. If the user hovers over a visited link, the hover styles take precedence. If the user activates the link (that is, clicks it) while hovering over it, the active styles take precedence.

Pseudo 선택자는 명시도가 같습니다.
명시도에 대해 Pseudo 선택자를 쓸 땐, 선언 순서가 중요해집니다.
일반적인 케이스의 인터랙션 스타일링 시 LoVe / H Ate 순서로 선언해줍시다.

Link > Visited > Hover > Active

사용자가 방문한 링크(:visit) 위로 마우스를 가져가면 :hover 스타일이 우선합니다. 사용자가 링크 위에 마우스를 올려놓은 상태(:hover)에서 링크를 활성화(:active)하면 활성화된 스타일이 우선합니다.

a:link {
  color: blue;
}

a:visited {
	color: purple;
}

a:hover {
	color: yellow;
}

a:active {
	color: red;
}