CSS에서 ':'과 '::'의 차이점은 무엇입니까?

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

(추천 튜토리얼: CSS 튜토리얼)

의사 클래스는 문서의 요소와 독립적으로 스타일을 할당할 수 있으며 모든 요소에 할당할 수 있으며 논리적으로나 기능적으로는 클래스와 유사하지만 미리 정의되어 있습니다. 문서 트리에는 표현 방법이 다르기 때문에 의사 클래스(pseudo-class)라고 합니다.

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

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

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

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

의사 클래스

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

:link

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

:hover

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

:active

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

:visited

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

:focus

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

:first-child

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

:lang

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

(학습 동영상 추천: css 동영상 튜토리얼)

Pseudo-element

특수한 상태의 요소를 대상으로 하는 의사 클래스와 달리 의사 요소는 해당 요소의 특정 콘텐츠에 대해 작동하며 작동 수준이 더 높습니다. 클래스는 의사 요소보다 한 단계 더 깊기 때문에 의사 클래스보다 훨씬 덜 동적입니다.

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

::first-letter

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

::first-line

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

::before

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

::after

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

위 내용은 CSS에서 ':'과 '::'의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!