단일 콜론(:)은 CSS3 의사 클래스에 사용되고, 이중 콜론(::)은 CSS3 의사 요소에 사용됩니다. W3C 사양에는 CSS3 선택기에 대한 설명이 있습니다.
의사 요소는 두 개의 콜론(::)과 의사 요소의 이름으로 구성됩니다.
이 :: 표기법은 의사 클래스와 의사 요소 간의 구별을 확립하기 위해 현재 문서에서 도입되었습니다. 기존 스타일 시트와의 호환성을 위해 사용자 에이전트는 또한 CSS 레벨 1 및 2(즉, :first-line, :first-letter, :before 및 :after). CSS 레벨 3에 도입된 새로운 의사 요소에는 이 호환성이 허용되지 않습니다.
간단히 번역하면, 일반적인 아이디어는 의사 요소가 이중 콜론과 의사 요소의 이름으로 구성된다는 것입니다. 현재 사양에서는 의사 클래스와 의사 요소를 구별하기 위해 이중 콜론이 도입되었습니다. 그러나 의사 클래스는 기존 스타일과 호환되며 브라우저는 :first-line, :first-letter, :before, :after 등과 같은 이전 의사 클래스를 동시에 지원해야 합니다.
이제 제목의 질문에 완전히 답할 수 있습니다. :before와 같이 CSS2 이전에 존재했던 의사 요소의 경우 단일 콜론과 이중 콜론::before가 동일한 효과를 갖습니다.
따라서 웹사이트가 웹킷, 파이어폭스, 오페라 및 기타 브라우저와만 호환되어야 한다면 의사 요소에 이중 콜론 작성 방법을 사용하는 것이 좋습니다. IE 브라우저와 호환되어야 한다면 CSS2를 사용하는 것이 더 안전합니다. 단일 콜론 작성 방법.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
단일 콜론(:)은 CSS3 의사 클래스에 사용되고, 이중 콜론(::)은 CSS3 의사 요소에 사용됩니다.
W3C 사양에는 CSS3 선택기에 대한 설명이 있습니다.
의사 요소는 두 개의 콜론(::)과 의사 요소의 이름으로 구성됩니다.
이 :: 표기법은 의사 클래스와 의사 요소 간의 구별을 확립하기 위해 현재 문서에서 도입되었습니다. 기존 스타일 시트와의 호환성을 위해 사용자 에이전트는 또한 CSS 레벨 1 및 2(즉, :first-line, :first-letter, :before 및 :after). CSS 레벨 3에 도입된 새로운 의사 요소에는 이 호환성이 허용되지 않습니다.
간단히 번역하면, 일반적인 아이디어는 의사 요소가 이중 콜론과 의사 요소의 이름으로 구성된다는 것입니다. 현재 사양에서는 의사 클래스와 의사 요소를 구별하기 위해 이중 콜론이 도입되었습니다. 그러나 의사 클래스는 기존 스타일과 호환되며 브라우저는 :first-line, :first-letter, :before, :after 등과 같은 이전 의사 클래스를 동시에 지원해야 합니다.
이제 제목의 질문에 완전히 답할 수 있습니다. :before와 같이 CSS2 이전에 존재했던 의사 요소의 경우 단일 콜론과 이중 콜론::before가 동일한 효과를 갖습니다.
따라서 웹사이트가 웹킷, 파이어폭스, 오페라 및 기타 브라우저와만 호환되어야 한다면 의사 요소에 이중 콜론 작성 방법을 사용하는 것이 좋습니다. IE 브라우저와 호환되어야 한다면 CSS2를 사용하는 것이 더 안전합니다. 단일 콜론 작성 방법.
바이두는 이런 문제를 알고 있어요
참조:
의사 요소 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
의사 클래스 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes