버튼 가상클래스 (hover, focus 등)우선순위

a:link,
a:visited,
a:hover,
a:active,
a:focus { }

코드 상으로 나중에 등장하는 클래스의 우선순위가 높기 때문에 :hover 뒤에 a:visited 를 쓰게 되면 이미 방문한 링크 위에 올려도 :hover 명령이 적용되지 않습니다.

이미 방문한 링크 위에 마우스를 올렸을 때 반응 하도록 하려면 :visited 다음에 :hover 클래스가 등장하도록 코딩 하여야 합니다.

동일한 이유로 :hover 보다 :active 를 나중에 적어주는데 이는 프레임을 사용한 문서에서 :active 된 링크위에 마우스를 올려도 :active 속성이 남아있도록 해줍니다.

한편 :focus를 가장 나중에 적어주는 이유는 스크린을 볼 수 없는 시각 장애인들이 Tab 키를 이용하여 콘텐츠를 이용할 때 다른 가상 클래스에 의하여 :focus 의 기능을 방해받지 않기 위함 입니다.

:focus 가 위치할 때 그 부분을 소리 내어 읽어주거나 :focus 로 인하여 보이지 않던 내용이 다음 이동 순서에 나타날 수도 있기 때문 입니다.
물론 일반 웹 브라우저가 아닌 시각장애인용 브라우저에서 말입니다.