CSS에서 의사 클래스 선택자의 역할은 매우 중요하다고 할 수 있는데, CSS에 의사 클래스 선택자가 없으면 js의 도움으로 많은 효과를 완성해야 합니다. 유지하기가 어렵습니다. 이렇게 프로그래머에게 과중한 업무량은 개발 효율성을 높이고, 같은 세상에서 더 높은 품질의 개발을 완성한다는 CSS의 목적에도 어긋납니다.
의사 클래스 선택자에는 의사 클래스 및 의사 클래스 객체 선택자가 포함됩니다. 의사 클래스 선택자는 접두사 식별자로 콜론(:)을 사용합니다. 의사 클래스 애플리케이션의 범위를 제한하기 위해 콜론 앞에 선택기를 추가할 수 있습니다. 콜론 다음에는 의사 클래스 및 의사 클래스 개체 이름이 있습니다. 콜론 앞뒤에는 공백이 없습니다. 그림과 같이 클래스 선택기입니다.
다음 표에는 대부분의 의사 클래스 선택기가 포함되어 있습니다.
동적 의사 클래스
동적 의사 클래스는 동작 스타일의 일종입니다. 이러한 스타일은 HTML에 존재하지 않으며 사용자가 페이지와 상호 작용할 때만 반영될 수 있습니다. 동적 의사 클래스 의사 클래스 선택기에는 두 가지 형식이 포함됩니다.
:link, :visited와 같은 링크에서 가장 일반적인 스타일인 앵커 의사 클래스입니다.
동작 의사 클래스는 :hover, :active 및 :focus와 같은 사용자 작업 의사 클래스라고도 합니다.
교육의 단순화를 위해 인라인으로 작성합니다. 실제 응용에서는 인라인을 사용하지 않는 것이 좋습니다.
:링크
점프하기 전에 하이퍼링크 스타일을 설정합니다. 사용법은 다음과 같습니다.
<ahref=#target=_blank>점프</a>
위의 하이퍼링크 앞에 스타일을 빨간색 글꼴 색상으로 설정하고 밑줄이 없도록 설정하려면 다음과 같이 설정하면 됩니다.
:방문하다
이 가상 클래스는 :link의 정반대입니다. :link는 링크 전의 스타일이고, :visited는 링크 후의 스타일, 즉 방문 후의 하이퍼링크 스타일입니다.
<ahref=#target=_blank>점프</a>:li
일상 학습에서는 모든 사람이 링크 앞뒤에 함께 작성할 수 있으며 이는 편리하고 빠르며 의미론적입니다. 이로 인해 많은 학생들이 이 두 가상 클래스에 적용 범위 효과가 있다는 사실을 알지 못하게 됩니다. 다음 예는 일반적인 이해에 도움이 될 수 있습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-꾸밈:none;}a:visited{color:green; 텍스트 장식:밑줄;}</style></head><body><ahref=login.htmltarget=_blank>점프</a></body></html>위 코드는 HTML 페이지에서 로그인 페이지로의 점프 링크입니다. 실행 후 렌더링은 다음과 같습니다.
:호버
:hover 의사 클래스 선택기는 사용자가 요소 위로 마우스를 이동할 때 스타일링 효과를 위해 사용됩니다. 하이퍼링크에만 사용되는 것이 아니라 버튼 등 다양한 요소에 적용할 수 있습니다. 마우스를 위에 올리면 버튼의 북쪽 배경색이 어두워지거나 색상이 변경되는 것을 확인할 수 있습니다. 물론 다른 설정 방법도 있지만 의심의 여지가 없습니다. hover가 가장 간단하고 빠른 방법입니다. 여기에서는 먼저 하이퍼링크를 사용하는 기술을 소개한 다음, 요소 위로 마우스를 이동한 후 이를 확장하고 사용하여 효과를 변경합니다.
마우스를 태그 요소 위로 가져갈 때 요소 색상이 변경되도록 하려면 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>점프</a></body></html> 
확장하다
구조 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;배경:주황색 ;text-align:center;}</style></head><body><div>:hover</div></body></html>원하는 효과는 div 요소 위로 마우스를 이동할 때 배경색이 검은색으로 변경되고 글꼴이 흰색으로 변경되는 경우 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;배경:주황색 ;text-align:center;transition:all1s;}div:hover{배경:black;color:white;}</style></head><body><div>:hover</div></body>< /html>:활동적인
:active는 사용자가 요소를 클릭할 때 스타일 효과를 위해 사용됩니다. 주로 폼 컨트롤에 사용됩니다. 사용자가 클릭하면 버튼을 누르는 것과 같은 효과가 있습니다. 같은 이유로 확장 영역에 넣어두었습니다.
하이퍼링크를 클릭했을 때 하이퍼링크의 글꼴 색상을 변경하고 싶습니다. 구현 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>점프</a></body></html>확장하다
이 예제에서는 div를 사용하여 버튼을 모방합니다. HTML에 포함된 버튼 스타일은 한 단어로 설명하기 어렵습니다. 스타일을 모방하고 제어하는 것은 쉽습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;배경 :green;font-size:24px;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{배경:orange;color:white;}</style></head ><body><div>버튼</div></body></html>:집중하다
:focus는 다목적 요소가 포커스가 될 때 효과의 스타일을 지정하는 데 사용됩니다. 이는 양식 제어 요소에 자주 사용됩니다.
구조 코드:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ 본문></html>
입력에 포커스를 두려는 경우 배경색은 #CCC이고 구현 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{배경:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>입력이 포커스를 받은 후 배경색을 대상 색상으로 변경하는 스타일 효과를 볼 수 있습니다.
참고 사항:
(1) 위의 의사 클래스 선택기는 순서 원칙을 따릅니다. 즉, 방문한 링크를 마우스로 가리키고 활성 의사 클래스로 연결합니다.
(2) Hover 및 active는 사용자 행동 의사 범주에 포함됩니다.
첫째 아이
의사 클래스 first-child는 지정된 상위 요소 아래의 첫 번째 하위 요소와 일치할 수 있습니다. 예를 들어 ul li:first-child는 <ul> 요소 아래의 첫 번째 <li> 요소와 일치할 수 있습니다.
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*<ul>*/color:red;}</style></head>< body>에서 첫 번째 <li>태그와 일치합니다. <ul><li>dotcpp 프로그래밍</li><li>dotcpp 프로그래밍</li><li>dotcpp 프로그래밍</li></ul></body></html>실행 결과:
어린아이
first-child와 마찬가지로 가상 클래스 last-child는 지정된 상위 요소 아래의 마지막 하위 요소와 일치할 수 있습니다. 예를 들어, ul li:last-child는 <ul> 요소 아래의 마지막 <li> 요소와 일치할 수 있습니다. 샘플 코드는 다음과 같습니다:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*<ul>*/color:red;} 아래의 마지막 <li>태그와 일치</style></head><body > <ul><li>dotcpp 프로그래밍</li><li>dotcpp 프로그래밍</li><li>dotcpp 프로그래밍</li></ul></body></html>실행 결과:
n번째 아이
가상 클래스 nth-child는 지정된 요소 아래의 n번째 하위 요소와 일치할 수 있습니다. 예를 들어, ul li:nth-child(2)는 <ul> 요소 아래의 두 번째 <li> 요소와 일치할 수 있습니다. . 샘플 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*<ul>*/color:red;}</style></ head> 아래의 두 번째 <li>태그와 일치합니다. <body><ul><li>dotcpp 프로그래밍</li><li>dotcpp 프로그래밍</li><li>dotcpp 프로그래밍</li></ul></body></html>실행 결과:
