CSS에서 하나의 콜론과 두 개의 콜론은 무엇을 의미합니까?

콜론 1개는 의사 클래스이고, 콜론 2개는 의사 요소입니다.

(추천 학습: css 빠른 시작)

의사 클래스는 문서의 요소와 독립적으로 스타일을 할당할 수 있으며 어떤 요소에도 할당할 수 있습니다. 논리적으로는 기능적 클래스와 유사하지만 미리 정의되어 있으며 not 문서 트리에 존재하며 다양한 방식으로 표현되므로 의사 클래스(pseudo-class)라고 합니다.

의사 요소에 의해 제어되는 콘텐츠는 요소에 의해 제어되는 콘텐츠와 동일하지만 의사 요소는 문서 트리에 존재하지 않으며 실제 요소가 아니므로 의사 요소라고 합니다.

의사 클래스에는 다음이 포함됩니다: :first-child, :link:, vitited, :hover:, active:focus, :lang

의사 요소에는 다음이 포함됩니다: :first-line, :first-letter, :before, :after

의사 클래스와 의사 요소의 차이점:

Pseudo-classes

의사 클래스 선택 요소는 요소의 현재 상태나 요소의 현재 특성을 기반으로 합니다. 요소의 ID, 클래스, 속성 등. 정적 로고.

상태가 동적으로 변경되므로 요소가 특정 상태에 도달하면 의사 클래스 스타일을 얻을 수 있으며 상태가 변경되면 이 스타일을 잃게 됩니다. 이를 통해 그 기능이 클래스의 기능과 다소 유사하다는 것을 알 수 있지만 문서 외부의 추상화에 기반을 두고 있으므로 의사 클래스라고 합니다.

:link

의사 클래스는 방문하지 않은 링크에 적용되며 :visited와 상호 배타적입니다.

:hover

의사 클래스는 마우스 포인터가 위에 있는 요소에 적용됩니다.

:active

의사 클래스는 클릭한 링크, 누른 버튼 등과 같은 활성화된 요소에 적용됩니다.

:visited

의사 클래스는 방문한 링크에 적용되며 :link와 상호 배타적입니다.

:focus

의사 클래스는 키보드 입력 포커스가 있는 요소에 적용됩니다.

:first-child

의사 클래스는 요소가 페이지에 처음 나타날 때 적용됩니다.

:lang

의사 클래스는 지정된 lang이 있는 요소에 적용됩니다.

의사 요소

특수 상태의 요소를 대상으로 하는 의사 클래스와 달리 의사 요소는 요소의 특정 콘텐츠에 대해 작동합니다. 해당 수준은 의사 클래스보다 한 수준 더 깊습니다. 역학 성별은 의사 클래스보다 훨씬 낮습니다.

사실 의사 요소를 디자인하는 목적은 요소 내용의 첫 글자(글자)와 첫 줄을 선택하고, 특정 내용의 앞이나 뒤를 선택하는 것인데, 이는 일반 선택자가 할 수 없는 일입니다. 이것이 제어하는 ​​내용은 실제로 요소와 동일하지만 요소를 기반으로 한 추상화일 뿐 문서에는 존재하지 않으므로 의사 요소라고 합니다.

::first-letter

의사 요소의 스타일은 해당 요소 텍스트의 첫 글자에 적용됩니다.

::first-line

의사 요소의 스타일은 요소 텍스트의 첫 번째 줄에 적용됩니다.

::before

요소 콘텐츠 앞에 새 콘텐츠를 추가하세요.

::after

요소 콘텐츠 끝에 새 콘텐츠를 추가하세요.

::before 및 ::after는 CSS 콘텐츠 생성에 자주 사용됩니다.

위 내용은 CSS에서 하나의 콜론과 두 개의 콜론은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!