CSS에서 콜론 1개(:)와 콜론 2개(::)의 차이점

추천: css 비디오 튜토리얼

한 개의 콜론은 의사 클래스이고, 두 개의 콜론은 의사 요소입니다.

의사 클래스는 문서의 요소와 독립적으로 스타일을 할당할 수 있으며, 어떤 요소에든 할당될 수 있으며 기능의 클래스와 논리적으로 유사하지만 미리 정의되어 있고 문서 트리에 존재하지 않으며 다른 방식으로 표현되므로 의사 클래스라고 합니다.

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

의사 클래스 에는 다음이 있습니다: :first-child , :link:, vistited, :hover:, active:focus, :lang

의사 요소 에는::first-line , :first-letter, :before, :after (Su Chen Xiaoyu가 편집한 CSS2.0 중국어 매뉴얼에 :first-line, :first-letter가 의사 클래스로 나열되어 있다는 오해가 있어야 합니다)

웹사이트가 webkit, Firefox, Opera 및 기타 브라우저와만 호환되어야 한다면 의사 요소에 대해 이중 콜론 작성 방법을 사용하는 것이 좋습니다. IEbrowser와 호환되어야 하는 경우입니다. CSS2 단일 콜론 작성 방법을 사용하는 것이 더 안전합니다

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

pseudo-classes

의사 클래스 선택 요소는 현재 상태를 기반으로 합니다. id, 클래스, 속성과 같은 요소의 정적 기호가 아닌 요소의 현재 특성입니다. 상태는 동적으로 변경되므로 요소가 특정 상태에 도달하면 상태가 변경되면 의사 클래스 스타일을 얻을 수 있지만 이 스타일은 손실됩니다. 이를 통해 그 기능이 클래스의 기능과 다소 유사하다는 것을 알 수 있지만 문서 외부의 추상화에 기반을 두고 있으므로 의사 클래스라고 합니다.

:link

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

:hover

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

:active

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

:visited

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

:focus

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

:first-child

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

:lang

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

Pseudo-elements

특수한 상태의 요소를 대상으로 하는 의사 클래스와 달리 의사 요소는 요소의 특정 콘텐츠에 대해 작동하며 작동하는 수준은 의사 클래스보다 한 수준 더 깊습니다. 그래서 의사 클래스보다 훨씬 덜 역동적입니다. 실제로 의사 요소를 디자인하는 목적은 요소 내용의 첫 글자(문자)와 첫 줄을 선택하고, 특정 내용의 앞이나 뒤를 선택하는 것인데, 이는 일반 선택자가 할 수 없는 일입니다. 그것이 제어하는 ​​내용은 실제로 요소와 동일하지만 요소를 기반으로 한 추상화일 뿐 문서에는 존재하지 않으므로 의사 요소라고 합니다.

::first-letter

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

::first-line

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

::before

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

::after

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

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 CSS에서 콜론 1개(:)와 콜론 2개(::)의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!