>웹 프론트엔드 >프런트엔드 Q&A >CSS에서 두 개의 콜론은 무엇을 의미합니까?

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

藏色散人
藏色散人원래의
2020-12-11 09:24:443382검색

CSS 두 개의 콜론은 "::selection"과 같은 의사 요소를 나타냅니다. 의사 요소에 의해 제어되는 내용은 요소에 의해 제어되는 내용과 동일하지만 의사 요소는 문서 트리에 존재하지 않으며 실제 요소가 아닙니다. 요소이므로 의사 요소라고 합니다.

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

이 기사의 운영 환경: windows10 시스템, CSS3, thinkpad t480 컴퓨터.

권장: "css 비디오 튜토리얼"

css 두 개의 콜론(::)은 "::selection"과 같은 의사 요소를 나타냅니다. 의사 요소에 의해 제어되는 내용은 요소에 의해 제어되는 내용과 동일하지만 의사 요소는 문서 트리에 존재하지 않으며 실제 요소가 아니므로 의사 요소라고 합니다.

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

사실 의사 요소를 디자인하는 목적은 요소 내용의 첫 글자(글자)와 첫 줄을 선택하고, 특정 내용의 앞이나 뒤를 선택하는 것인데, 이는 일반 선택자가 할 수 없는 일입니다.

그것이 제어하는 ​​콘텐츠는 실제로 요소와 동일하지만 요소를 기반으로 한 추상화일 뿐이며 문서에는 존재하지 않으므로 의사 요소라고 합니다.

확장:

W3C 사양에는 CSS3 선택자에 대한 설명이 있습니다:

 의사 요소는 두 개의 콜론(::)과 그 뒤에 오는 의사 요소의 이름으로 구성됩니다.

 This :: 표기법 기존 스타일 시트와의 호환성을 위해 사용자 에이전트는 CSS 레벨 1과 2에 도입된 의사 요소에 대한 이전의 단일 콜론 표기법도 허용해야 합니다. (즉, :first-line, :first-letter, :before 및 :after) CSS 레벨 3에 도입된 새로운 의사 요소에는 이 호환성이 허용되지 않습니다.

간단한 번역으로, 일반적인 개념은 다음과 같습니다. -요소는 이중 콜론과 의사 요소 이름으로 구성됩니다. 현재 사양에서는 의사 클래스와 의사 요소를 구별하기 위해 이중 콜론이 도입되었습니다. 그러나 의사 클래스는 기존 스타일과 호환되며 브라우저는 :first-line, :first-letter, :before, :after 등과 같은 이전 의사 클래스를 동시에 지원해야 합니다.

즉, :before와 같이 CSS2 이전에 존재했던 의사 요소의 경우 단일 콜론과 이중 콜론::before는 동일한 효과를 갖습니다.

따라서 웹사이트가 웹킷, 파이어폭스, 오페라 및 기타 브라우저와만 호환되어야 한다면 의사 요소에 이중 콜론 작성 방법을 사용하는 것이 좋습니다. IE 브라우저와 호환되어야 한다면 사용하는 것이 더 안전합니다. CSS2 단일 콜론 작성 방법.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.