CSS3에 추가된 의사 클래스(pseudo-class)는 무엇이며 그 기능은 무엇입니까?

이 기사에서는 CSS3에 추가된 의사 클래스가 무엇이며 그 기능은 무엇인지 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 의사 클래스 및 의사 요소

CSS 의사 클래스: 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.

CSS 의사 요소: 특정 선택기에 특수 효과를 추가하는 데 사용됩니다. 의사 요소는 요소의 하위 요소를 나타냅니다. 이 하위 요소는 논리적으로 존재하지만 실제로는 문서 트리에 존재하지 않습니다.

의사 요소	Function
::first-letter	텍스트의 첫 글자에 스타일 추가
::first-line	텍스트의 첫 번째 줄에 스타일 추가
::before	요소 앞에 뭔가 삽입
::after	요소 뒤에 뭔가 삽입

의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있으며, 다음의 효과는 의사 요소는 실제 요소를 추가하여 구현해야 하므로 그 중 하나를 의사 클래스라고 하고 다른 하나를 의사 요소라고 합니다.

의사 클래스와 의사 요소를 구별하기 위해 CSS3에서는 의사 클래스는 하나의 콜론으로, 의사 요소는 두 개의 콜론으로 표시한다고 명확하게 규정했습니다. 그러나 호환성 문제로 인해 대부분은 여전히 ​​단일 콜론을 사용합니다. 그러나 호환성 문제와 관계없이 둘을 구별하고 작성할 때 좋은 습관을 기르도록 최선을 다해야 합니다.

단일 콜론(:)은 CSS3 의사 클래스에 사용되고, 이중 콜론(::)은 CSS3 의사 요소에 사용됩니다. 의사 요소는 이중 콜론과 의사 요소의 이름으로 구성됩니다. 그러나 브라우저는 first-line, :first-letter, :before, :after 등과 같은 기존의 기존 의사 요소 작성 방법을 동시에 지원해야 하며, CSS3에 도입된 새로운 의사 요소는 더 이상 이전 항목을 지원하는 것이 허용되지 않습니다.

2. CSS3는 새로운 의사 클래스를 추가합니다

: 집중

새로운 의사 클래스	Function
p:first-of-type	첫 번째 상위 요소 Element.
p:last-of-type	상위 요소의 마지막 요소를 모두 선택합니다.
p:only-of-type	해당 상위 요소의 유일한 요소를 선택합니다.
p:only-child	상위 요소의 유일한 하위 요소인 각 요소를 선택합니다.
p:nth-child(n)	상위 요소의 n번째 하위 요소인 모든 요소를 선택합니다.
p:nth-last-child(n)	상위 요소의 맨 아래에서 n번째 하위인 각 요소를 선택합니다.
p:nth-of-type(n)	상위 항목의 n번째 요소인 모든 요소를 선택합니다.
p:nth-last-of-type(n)	상위 요소의 맨 아래에서 n번째 요소를 선택합니다.
p:last-child	상위 요소의 마지막 하위인 모든 요소를 선택합니다.
p:empty	하위 요소가 없는 모든 요소(텍스트 노드 포함)를 선택합니다.
p:target	현재 활성화된 요소를 선택합니다.
:not(p)	은 요소가 아닌 모든 요소를 ​​선택합니다.
:enabled	양식 컨트롤의 사용 가능한 상태를 제어합니다.
:disabled	양식 컨트롤의 비활성화 상태를 제어합니다.
:선택됨	라디오 버튼 또는 확인란이 선택되어 있습니다. ㅋㅋㅋ

추가 집중된 요소에 스타일 추가관련 권장 사항:어떤 유형의 CSS 선택기가 있나요? CSS에서 일반적으로 사용되는 선택기에 대한 간략한 소개

:link	방문하지 않은 링크에 스타일 추가
:visited	방문한 링크에 스타일 추가
:first-child	의 첫 번째 하위 요소에 스타일 추가 element
:lang	지정된 요소에 사용되는 언어 정의
	CSS란 무엇인가요? 세 가지 CSS 스타일 및 텍스트 속성 소개

위 내용은 CSS3에 추가된 의사 클래스(pseudo-class)는 무엇이며 그 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!