>  기사  >  웹 프론트엔드  >  HTML의 의사 클래스란 무엇입니까?

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

青灯夜游
青灯夜游원래의
2021-12-23 14:57:106133검색

HTML에서 의사 클래스는 특정 상태(슬라이딩, 클릭 등)에 있을 때 기존 요소에 해당 스타일을 추가하는 데 사용되는 선택자이며 이 상태는 사용자 행동에 따라 동적으로 변경됩니다. 일반적으로 사용되는 의사 클래스에는 ":active", ":hover", ":link", ":root", ":valid" 등이 있습니다.

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

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

Pseudo-class: 는 특정 상태(슬라이딩, 클릭 등)에 있을 때 기존 요소에 해당 스타일을 추가하는 데 사용됩니다. 이 상태는 사용자 행동에 따라 동적으로 변경됩니다.

제가 이해한 바는, 그 자체로는 존재하지 않는다는 것입니다. 특정 상황(슬라이딩, 클릭)에서만 실행되는 상태입니다. 이 상태에서는 CSS를 사용하여 개체를 수정할 수 있습니다.

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

일반적으로 사용되는 의사 클래스는 다음과 같습니다.

  • :active는 활성화되는 요소를 선택합니다(지정된 상태와 일치)

  • :hover는 마우스로 가리키고 있는 요소를 선택합니다(지정된 상태와 일치)

  • :link 방문하지 않은 요소 선택(지정된 상태와 일치)

  • :visited 방문한 적이 있는 요소 선택(지정된 상태와 일치)

  • :first-child 첫 번째 요소 선택 상위 요소의 하위 요소

  • :lang(value) 지정된 lang 속성이 있는 요소 선택

  • :focus 키보드 입력 포커스가 있는 요소 선택

  • :enable 활성화된 각 요소 선택

  • :disable 금지된 각 요소 선택

  • :checked는 선택한 각 요소를 선택합니다.

  • :target은 현재 앵커 요소를 선택합니다.

  • :first-of-type은 상위 요소를 만족하는 첫 번째 요소를 선택합니다. 하위 요소인 요소 of a 특정 유형

  • :last-of-type은 해당 상위 요소의 특정 유형의 마지막 하위 요소인 요소를 선택합니다

  • :only-of-type은 특정 유형의 유일한 요소인 요소를 선택합니다. 상위 요소 특정 유형의 하위 요소인 요소

  • :nth-of-type(n) 해당 상위 요소의 특정 유형의 n번째 하위 요소인 요소를 선택합니다

  • :nth -last-of-type(n ) 상위 요소의 끝에서 두 번째 n번째 요소임을 만족하는 특정 유형의 요소를 선택합니다

  • :only-child 해당 요소의 유일한 하위 요소임을 만족하는 요소를 선택합니다. 상위 요소

  • :last-child 자신이 상위임을 만족하는 요소를 선택합니다. 요소의 마지막 요소

  • :nth-child(n)는 해당 요소의 n번째 하위 요소를 만족하는 요소를 선택합니다. parent element

  • :nth-last-child(n)는 상위 요소의 n번째 하위 요소를 만족하는 요소를 선택합니다. 마지막

  • :empty에서 n번째 하위 요소인 요소는 다음을 만족하는 요소를 선택합니다. 하위 요소 없음

  • :in-range는 지정된 범위 내의 값을 만족하는 요소를 선택합니다

  • :out-of-range는 값을 선택합니다. 지정된 범위 내에 없는 요소

  • :잘못된 선택 유효하지 않은 값을 만족하는 요소

  • :valid 유효한 값을 만족하는 요소를 선택합니다

  • :not(selector) 선택기를 만족하지 않는 요소를 선택합니다

  • :선택 사항은 선택적인 양식 요소를 선택합니다. 즉, "필수" 속성이 없습니다.

  • :read-only는 "readonly"가 있는 양식 요소를 선택합니다.

  • :read-write는 "readonly" 요소가 없는 양식을 선택합니다.

  • :root 루트 요소

관련 권장 사항: "html 비디오 튜토리얼"

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.