차이: 콜론 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!