상태는 동적으로 변경되므로 요소가 특정 상태에 도달하면 상태가 변경되면 의사 클래스 스타일을 얻을 수 있지만 이 스타일은 손실됩니다. 이를 통해 그 기능이 클래스의 기능과 다소 유사하다는 것을 알 수 있지만 문서 외부의 추상화에 기반을 두고 있으므로 의사 클래스라고 합니다.
CSS 의사 클래스는 CSS 선택기에서 작동하여 선택한 태그나 요소에 특정 효과를 생성하는 특수 클래스입니다.
CSS 의사 클래스의 구문은 다음과 같습니다: 선택기: 의사 클래스 이름 {속성: 속성 값}
가장 일반적으로 사용되는 의사 클래스는 하이퍼링크 a의 의사 클래스입니다. 링크는 웹 사이트의 중요한 부분입니다. 링크 스타일의 합리적인 디자인은 웹 페이지의 모양에 추가할 수 있습니다. . 가리키다. 링크에는 링크, 방문, 활성 및 가리키기라는 네 가지 상태가 있습니다. 다음 의사 클래스 선택기를 통해 링크의 네 가지 상태에 대해 서로 다른 스타일을 설정할 수 있습니다.
:link: 방문하지 않은 링크의 스타일을 정의합니다.
:visited: 방문한 링크의 스타일을 정의합니다.
:hover: 마우스가 링크를 지나가거나 링크 위로 이동할 때의 스타일을 정의합니다.
:active: 링크를 클릭할 때 스타일을 정의합니다.
예:
<html><head></head><body><a>href 태그가 없고 글꼴이 수정되지 않으며 마우스를 올려도 반응이 없습니다</a></br>< ahref=#target=_blank>href는 #의 a 태그는 기본적으로 파란색이며 밑줄이 그어져 있습니다. 마우스를 올리면 손 모양으로 변합니다.</a></br><ahref=https://www .dotcpp.com/target=_blank>href는 URL의 태그입니다. 효과는 위와 동일합니다.</a></body></html>
실행 결과:
(1):링크
설명: 개체에 액세스하기 전에 개체의 스타일 시트 속성을 설정합니다.
예:
<!DOCTYPEhtml><html><head><style>a{text-장식:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;mar gin-left:10px;배경:#ccc;color:black;}</style></head><body><ahref=''>첫 번째 링크</a><ahref=''>두 번째 링크</a ></body></html>실행 결과:
(2):방문하다
설명: 링크 주소에 접근했을 때 오래된 객체의 스타일 시트 속성을 설정합니다.
예:
<!DOCTYPEhtml><html><head><style>a{text-장식:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;배경:#ccc ; color:black;}a:visited{배경:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>첫 번째 링크</a><ahref =' '>두 번째 링크</a></body></html>실행 결과:
(3):호버
설명: 개체에 마우스를 올렸을 때 개체의 스타일 시트 속성을 설정합니다.
예:
<!DOCTYPEhtml><html><head><style>a{text-장식:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;배경:#ccc ;색상:검정색;}a:방문{배경 und:#FFFF99;border:1pxsolidred;color:red;}a:hover{배경:#9c6ae1;border:1pxsolidblack;color:black;}</style></head><body><ahref=''>아니요 . 링크 1개</a><ahref=''>두 번째 링크</a></body></html>실행 결과:
(4):활성
설명: 사용자가 개체를 활성화할 때(마우스 클릭과 놓기 사이에 발생하는 이벤트) 개체의 스타일 시트 속성을 설정합니다.
예:
<!DOCTYPEhtml><html><head><style>a{text-장식:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;배경:#ccc ;색상:검은색;}a:방문{배경:#FFFF99;경계:1pxsolidred ;색상:빨간색;}a:hover{배경:#9c6ae1;border:1pxsolidblack;color:black;}a:활성{배경:#000;border:1pxsolidblack;color:white;}</style></head> <body><ahref=''>첫 번째 링크</a><ahref=''>두 번째 링크</a></body></html>실행 결과:
CSS를 정의할 때 순서가 다르면 링크 표시 효과가 달라집니다. 그 이유는 브라우저가 CSS를 해석할 때 따르는 '근접성 원칙' 때문일 수 있습니다. 올바른 순서: a:link, a:visited, a:hover, a:active.