CSS의 의사 클래스는 무엇입니까-프런트엔드 Q&A-php.cn

CSS의 의사 클래스는 무엇입니까

青灯夜游

풀어 주다： 2023-01-07 11:45:07

원래의

9301명이 탐색했습니다.

css 의사 클래스: ":active", ":any-link", ":blank", ":checked", ":current", ":first", ":first-child", ":future" , ":focus", ":has()", ":host" 등

CSS의 의사 클래스는 무엇입니까

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

의사 클래스 선택기(가상 클래스라고도 함)는 클릭 누름, 클릭 완료 등 요소의 상태를 정의하는 콜론으로 정의됩니다. 스타일은 다음을 통해 요소의 상태에 맞게 수정할 수 있습니다. 의사급. CSS 의사 클래스는 선택기에 몇 가지 특수 효과를 추가하는 데 사용됩니다.

CSS의 의사 클래스 목록

:active	:any-link	:blank	:checked	:current	:default
:define	:dir()	:disabled	:drop	:empty	:enabled
:first	:first-child	:first-of-type	:fullscreen	:future	:focus
:focus-visible	:focus -within	:has()	:host	:host()	:host-context()
:hover	:indeterminate	:in-range:invalid	:is()	:lang()	:last-child
:last-of-type	:left	:link	:local-link	:not()	:nth-child()
:nth-col()	:nth-last-child()	:nth-last-col()	:nth-last-of-type()	:nth-of-type ()	:독생
:유형만	:선택적	:범위 밖	:past	:placeholder-shown	:읽기 전용
:읽기-쓰기	:필수	:right	:root	:scope	:target
:target-within	:user-invalid	:valid	:visited	:where()

일반적으로 사용되는 의사 클래스 및 해당 분류

1. 동적 의사 클래스 선택기

상태에 따라 다른 스타일을 사용합니다.

E:링크E:link
E:visited
E:active
E:hover
E:focus

2、目标伪类选择器

用来匹配页面的URI中某个标识符的目标元素。

E:target

选择匹配E的所有元素，且匹配元素被相关URL指向。

3、语言伪类选择器

用来匹配使用指定语言的元素。

E:lang(language)

4、元素状态伪类选择器

当元素处于某种状态下时，才起作用，在默认状态下不起作用。

E:checked

eg:

input[type="checkbox"]:checked{}

로그인 후 복사

E:enabled

eg:

input[type="text"]:checked{}

로그인 후 복사

E:disabled

eg:

input[type="text"]:disabled{}

로그인 후 복사

5、结构伪类选择器

这个就比较多了，平时用的也比较频繁。

:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:only-child
:first-of-type
:last-of-type
:only-of-type
:root 匹配元素所有在文档的根元素
:empty 选择没有子元素的元素，且不包含节点

6、否定伪类选择器

E:not(F)

E:방문

E:활성🎜🎜🎜🎜E :hover🎜🎜🎜🎜E:focus🎜🎜🎜🎜🎜2 대상 의사 클래스 선택기 🎜🎜🎜는 URI에서 특정 식별자의 대상 요소를 일치시키는 데 사용됩니다. 페이지의. 🎜🎜E:target🎜🎜E와 일치하는 모든 요소를 선택하고, 일치하는 요소는 해당 URL로 가리킵니다. 🎜🎜🎜3. 언어 의사 클래스 선택기🎜🎜🎜는 지정된 언어를 사용하여 요소를 일치시키는 데 사용됩니다. 🎜🎜E:lang(언어)🎜🎜🎜4. 요소 상태 의사 클래스 선택기🎜🎜🎜요소가 특정 상태일 때만 작동하며 기본 상태에서는 작동하지 않습니다. 🎜🎜🎜🎜E:선택됨🎜🎜🎜🎜예:🎜rrreee🎜🎜🎜E:활성화🎜🎜🎜🎜예:🎜rrreee🎜🎜🎜E :disabled🎜🎜🎜🎜eg:🎜rrreee🎜🎜5. 구조적 의사 클래스 선택기🎜🎜🎜이것은 더 일반적이고 더 자주 사용됩니다. 🎜🎜🎜🎜:n번째-자식🎜🎜🎜🎜:n번째-마지막-자식🎜🎜🎜🎜:n번째 유형🎜 🎜🎜🎜:nth-last-of-type🎜🎜🎜🎜:first-child🎜🎜🎜🎜:last-child🎜🎜 🎜🎜:only-child🎜🎜🎜🎜:first-of-type🎜🎜🎜🎜:last-of-type🎜🎜🎜 🎜:only-of-type🎜🎜🎜🎜:root 문서의 모든 루트 요소와 일치 🎜🎜🎜🎜:empty 없음 선택 하위 요소의 요소이며 노드를 포함하지 않음 🎜🎜🎜🎜🎜6. 부정 의사 클래스 선택기 🎜🎜🎜🎜🎜E:not(F) F를 제외한 모든 E 요소와 일치 🎜🎜🎜 🎜 (학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜

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