CSS의 의사 클래스 - 4부(:active)

2930 단어 css
참고: 이것은 CSS의 의사 클래스 전용 5부 시리즈 중 4부입니다.

이 부분에서 우리는 의사 클래스 :active를 이해할 것입니다. 그러나 다른 의사 클래스로 건너뛰려면 제 게스트가 되어 아래 제공된 링크를 클릭하십시오.

1 부:

2 부:

3부:

4부:

5부:

** :active 선택기는 활성 링크의 스타일을 지정하는 데 사용됩니다.**

:link, :visited 및 :active의 차이는 매우 미묘합니다. 따라서 코드 편집기를 열고 이러한 작업을 시작하는 것이 좋습니다.
다음 예를 통해 :active 선택자를 더 잘 이해할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:active{
            color: red;
        }
    </style>
</head>
<body>
    <h1><a href="#">I am a link.</a></h1>
</body>
</html>




👆 위의 링크에서 볼 수 있듯이 클릭하는 즉시 링크의 원래 색상이 사라지고 빨간색으로 바뀝니다. 그러나 마우스 포인터를 놓으면 빨간색이 손실됩니다.

참고: 활성 선택기는 링크뿐만 아니라 모든 요소에서 사용할 수 있습니다.

다음은 간단한 요약입니다.
  • :hover 선택기를 사용하여 링크 위로 마우스를 가져갈 때 링크의 스타일을 지정합니다. 링크 이외의 요소에 사용할 수 있습니다.
  • :link 선택기를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정합니다.
  • :visited 선택기를 사용하여 방문한 페이지에 대한 링크 스타일을 지정합니다.
  • :active 선택기는 활성 링크의 스타일을 지정하는 데 사용됩니다. 링크 이외의 요소에 사용할 수 있습니다.

  • LVHA: 단일 페이지에서 이러한 선택기 중 하나 이상을 사용하는 경우 링크 선택기를 먼저 사용하고 방문한 선택기를 사용하고 마지막으로 마우스를 가져가면 끝에서 활성화됩니다.

    그게 다야.

    궁금한 점이 있으면 댓글 섹션에 질문해 주시면 최대한 빨리 답변해 드리겠습니다.

    나는 웹 개발과 관련하여 매일 하나의 기사를 씁니다(예, 매일). 같은 것을 배우고 있다면 여기로 나를 따르십시오 ..

    내 트위터 핸들:

    Linkedin 유형이라면 연결해 봅시다.

    멋진 하루 보내세요 😀!

    좋은 웹페이지 즐겨찾기