호버 기능은 링크를 방문 할 때만 작동합니다. 방문하기 전에 링크를 가리킬 때 색상이 변경되지 않습니다.
https://jsfiddle.net/raushankumar0717/xzggq9ex/
a:visited{
color:#ee9a00;
}
a:hover{
color:#ff0000;
}
a:link{
color:#008b45;
}<h3>Testing Link pseudo class workings:</h3>
<a href="https://en.wikipedia.org/wiki/Stack_Overflow">Link</a>의사 클래스 선언의 올바른 순서가 필요한 이유는 무엇입니까? link를 가리키면 선언 순서에 관계없이 a : hover에 따라 스타일을 지정해야합니다.
또한 특이성을 결정하기 때문에 순서가 중요하다는 것을 알고 있지만 의사 클래스는 html 요소의 동적 상태라고 생각합니다. 그리고 우리가 link 위에 커서를 올려 놓을 때, 요소의 상태는 hover이므로 순서에 관계없이 스타일 규칙 a : hover에 따라 스타일을 지정해야합니다.
이것이 CSS가 작동하는 방식입니다 (순서가 중요합니다). 스타일링 링크의 경우 의사 클래스의 순서는 다음과 같습니다.
순서가 중요한 이유는 CSS 특이성 때문입니다 . 작성한 규칙은 모두 동일한 특이성을 가지므로 순서의 영향을받습니다 (마지막에 작성된 규칙이 이전에 작성된 규칙보다 우선 적용됨).
참고 :hover키보드를 사용하는 작동하지 않습니다. :focus의사 클래스를 사용하여 이러한 사용자에게 동일한 경험을 제공 할 수 있습니다 .
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover,
a:focus {
text-decoration: underline;
}
a:active {
color: red;
}<a href="#">This is a link</a>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다