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

:CSS의 활성 의사 클래스

<시간/>

의사 클래스 요소 또는 CSS 선택자의 다른 상태를 표시하는 것입니다. 활성 의사 클래스는 요소가 활성 상태임을 표시하는 것입니다.

이 유사 클래스는 대부분 링크 및 버튼 또는 활성화될 수 있는 기타 요소와 연결됩니다.

예를 들어 링크와 연결된 경우 링크가 활성화됩니다.

구문

a:active { color:green;}

:active pseudo class 실제 사용법을 확인해 봅시다. 다음과 같이 다양한 시나리오로 −

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

설명

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

<html>
<head>
   <style>
      a:active {font-size:20px;}
   </style>
</head>
<body>
   <a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html>

설명

링크를 클릭하는 동안 링크의 글꼴 크기가 20px로 변경됩니다.

<html>
<head>
   <style>
      body:active {
         background: seagreen;
      }
      </style>
</head>
<body>
<div>click anywhere in this window</div>
</body>
</html>

설명

화면의 아무 곳이나 클릭하면 배경색이 바다색으로 바뀝니다.

<html>
<head>
   <style>
      #thisButton:active { color: red}
   </style>
</head>
<body>
   <button id="thisButton">Click Me!!</button>
</body>
</html>

설명

버튼을 클릭하는 동안 버튼 텍스트의 글꼴 색상이 빨간색으로 변경됩니다.

브라우저 호환성

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