CSS 의사 클래스란 무엇입니까?

css 의사 클래스에는 ":link", ":visited", ":hover", ":active", ":focus", ":lang()", "not()", ":root"가 포함됩니다. , ":first-child", ":last-child", ":empty" 등

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS 의사 클래스는 선택기의 일부 특수 효과를 추가하는 데 사용됩니다. 이는 특정 상태에 있는 기존 요소에 해당 스타일을 추가하는 데 사용됩니다. 이 상태는 사용자 행동에 따라 동적으로 변경됩니다.

예: 사용자가 지정된 요소 위로 마우스를 가져가면 :hover를 사용하여 이 요소의 상태를 설명할 수 있습니다. 일반 CSS와 유사하고 기존 요소에 스타일을 추가할 수 있지만 다음과 같은 상태일 수 있습니다. DOM 트리에서는 설명할 수 없습니다. 이 방법으로만 요소에 스타일을 추가할 수 있으므로 이를 의사 클래스라고 합니다.

가상 클래스는 동적일 수 있고 사용자가 문서와 상호작용할 때 요소는 의사 클래스를 얻거나 잃을 수 있는 것처럼 느껴집니다. 예외는 문서 트리에서 추론할 수 있는 ":first-child"와 경우에 따라 문서 트리에서도 추론할 수 있는 ":lang"입니다.

그 기능은 클래스와 다소 비슷하다고 볼 수 있지만, 문서 외부의 추상화에 기반을 두고 있으므로 의사 클래스라고 합니다.

css 의사 클래스 선택자 목록

Properties Properties	CSS Version Version	부모로부터 상속 상속	Description 소개
E:link	CSS1	None	CSS1 의사 클래스 선택기 E: 링크 , 방문하기 전에 하이퍼링크 a의 스타일을 설정합니다.
E:visited	CSS1	None	CSS1 의사 클래스 선택기 E:visited는 링크 주소를 방문했을 때 하이퍼링크 a의 스타일을 설정합니다.
E:hover	CSS2	None	CSS2/CSS1 의사 클래스 선택기 E:hover는 마우스로 요소를 가리킬 때 요소의 스타일을 설정합니다.
E:active	CSS2/CSS1	None	CSS2/CSS1 의사 클래스 선택기 E:active, 사용자가 활성화할 때 요소의 스타일을 설정합니다(마우스 클릭과 클릭 사이에 발생하는 이벤트). 풀어 주다).
E:focus	CSS2/CSS1	None	CSS2/CSS1 의사 클래스 선택기 E:focus는 입력 포커스가 될 때 요소의 스타일을 설정합니다(요소의 onfocus 이벤트 발생).
E:lang()	CSS2	None	CSS2 의사 클래스 선택기 E:lang()은 특수 언어를 사용하여 E 요소와 일치합니다.
E:not()	CSS3	None	CSS3 의사 클래스 선택기 E:not()는 s 선택기를 포함하지 않는 요소 E와 일치합니다.
E:root	CSS3	None	CSS3 의사 클래스 선택기 E:root는 문서의 루트 요소에 있는 E 요소와 일치합니다.
E:first-child	CSS2	None	CSS2 의사 클래스 선택기 E:first-child는 상위 요소의 첫 번째 하위 요소 E와 일치합니다.
E:last-child	CSS3	None	CSS3 의사 클래스 선택기 E:last-child는 상위 요소의 마지막 하위 요소 E와 일치합니다.
E:only-child	CSS3	None	CSS3 예를 들어 선택기 E:only-child는 상위 요소의 유일한 하위 요소 E와 일치합니다.
E:nth-child(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-child(n)은 상위 요소의 n번째 하위 요소 E와 일치합니다.
E:nth-last-child(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-last-child(n)는 상위 요소 하단에서 n번째 하위 요소 E와 일치합니다. .
E:first-of-type	CSS2	None	CSS3 의사 클래스 선택자 E:first-of-type은 동일한 유형의 첫 번째 형제 요소 E와 일치합니다.
E:last-of-type	CSS3	None	CSS3 의사 클래스 선택기 E:last-of-type은 동일한 유형의 마지막 형제 요소 E와 일치합니다.
E:only-of-type	CSS3	None	CSS3 의사 클래스 선택자 E:only-of-type은 동일한 유형의 유일한 형제 요소 E와 일치합니다.
E:nth-of-type(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-of-type(n)은 동일한 유형 E의 n번째 형제 요소와 일치합니다.
E:nth-last-of-type(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-last-of-type(n)은 동일한 클래스의 마지막에서 n번째와 일치합니다. 형제 요소 E를 입력합니다.
E:empty	CSS3	None	CSS3 의사 클래스 선택기 E:empty는 하위 요소(텍스트 노드 포함) 없이 요소 E와 일치합니다.
E:checked	CSS3	None	CSS3 의사 클래스 선택기 E:checked는 사용자 인터페이스에서 선택한 요소 E와 일치합니다. (입력 유형이 라디오 및 체크박스인 양식 요소의 경우)
E:enabled	CSS3	None	CSS3 의사 클래스 선택기 E:enabled는 사용자 인터페이스에서 사용 가능한 상태의 요소 E와 일치합니다.
E:disabled	CSS3	None	CSS3 의사 클래스 선택기 E:disabled는 사용자 인터페이스의 비활성화된 요소 E와 일치합니다.
E:target	CSS3	None	CSS3 의사 클래스 선택기 E:target은 관련 URL이 가리키는 E 요소와 일치합니다.
@page:first	CSS2	None	CSS2 의사 클래스 선택기 @page:first 페이지 컨테이너의 첫 번째 페이지에 사용되는 스타일을 설정합니다. @page 규칙에만 사용됩니다
@page:left	CSS2	None	CSS2 의사 클래스 선택기 @page:left 페이지 컨테이너가 여백 왼쪽에 있는 모든 페이지에서 사용되는 스타일을 설정합니다. . @page 규칙에만 해당
@page:right	CSS2	None	CSS2 개체 선택기 @page:right에 여백 오른쪽에 페이지 컨테이너가 있는 모든 페이지에 사용되는 스타일을 설정합니다. @page 규칙 전용

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 CSS 의사 클래스란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!