Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS에서 방문 의사 클래스

<시간/>

의사 클래스 요소 또는 CSS 선택자의 다른 상태를 표시하는 것입니다. 방문 의사 클래스는 링크가 이미 방문되었음을 표시하는 것입니다.

이 의사 클래스는 대부분 링크와 연결되어 있습니다.

구문

a:visited { color:green;}

:visited pseudo class 의 실제 사용법을 확인해보자 다음과 같이 다양한 시나리오로 -

예시

<html>
<head>
   <style>
      a:visited { color:green;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

설명

링크를 처음 볼 때 일반 링크 색상(파란색)으로 표시되고 이 링크를 한 번 방문한 경우 링크가 녹색으로 바뀝니다.

예시

<html>
<head>
   <style>
      /* setting default style to make the style visible for :visited state */
      a { background-color: white; border:1px solid white;}
      a:visited {border:yellow;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

설명

이 예에서 링크를 방문하면 링크에 노란색 1px 테두리가 포함됩니다.

예시

<html>
<head>
   <style>
      /* setting default style to make the style visible for :visited state */
      a { background-color: white; }
      a:visited { background-color: seagreen;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

설명

링크를 한 번 방문하면 배경색이 바다색으로 바뀝니다.

스타일 제한

개인 정보 보호 및 보안상의 이유로 방문한 의사 클래스는 color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-과 같은 제한된 CSS 속성 세트와 함께 작동할 수 있습니다. color, column-rule-color, outline-color 및 SVG 속성은 채우기 및 획입니다.

브라우저 호환성

크롬 파이어폭스 가장자리 IE 사파리 오페라
1 1 1 3.5