답변:
그것은 의사 클래스 대 의사 요소 구별입니다.
를 제외하고 ::first-line, ::first-letter, ::before및 ::after(당신이 IE8 지원이 필요한 경우 단일 콜론으로 사용할 수 있지만 이는 약간의 주변에 있었다), 가성 요소는 필요 더블 콜론.
의사 클래스는 실제 요소 자체 를 선택합니다 . 예를 들어 div에서 첫 번째 또는 특정을 선택 :first-child하거나 사용할 수 있습니다 .
(그리고 실제 같은 요소의 상태 와 ).:nth-of-type(n)<p>:hover:focus
의사 요소는 같은 요소의 하위 부분 대상 ::first-line이나 ::first-letter, 자신의 권리 요소가없는 것을.
실제로 여기에 더 나은 설명이 있습니다 : http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
또한 여기에 : http://www.evotech.net/blog/2007/ 05 / 애프터 v 이후 애프터 더블 콜론 표기법 /
:after하고 ::after서로 바꾸어 사용할 수 있습니다 .
CSS 선택기 ::after는 DOM 트리에서 명시 적 요소로 사용할 수없는 일부 가상 요소입니다. 이를 " 의사 요소 "라고하며 요소 앞 / 뒤에 일부 내용 을 삽입 하거나 (예 : ::before, ::after) 요소의 일부 를 선택 하는 데 사용됩니다 (예 :) ::first-letter. 현재 5 개의 표준 의사 요소 만 after, before, first-letter, first-line, selection있습니다.
한편, "라고 선택기 다른 유형의 존재 가상 클래스 정의하는 데 사용되는" 전용 상태 (AS 같은 요소는 :hover, :focus, :nth-child(n)). DOM에서 기존 요소 전체를 선택합니다. 유사 클래스는 30 개가 넘는 항목으로 구성된 긴 목록입니다.
처음에 (CSS2 및 CSS1에서) 단일 콜론 구문은 유사 클래스 및 유사 요소 모두에 사용되었습니다. 그러나 CSS3에서 ::구문 :은 의사 요소를 더 잘 구별하기 위해 의사 요소 표기법을 대체 했습니다.
이전 버전과의 호환성을 위해 이전 단일 콜론 구문은 다음과 같은 유사 요소에 허용됩니다 :after(브라우저는 여전히 하나의 세미콜론으로 이전 구문을 지원합니다). IE-8 만 새 구문을 지원하지 않습니다 (IE8을 지원하려면 단일 콜론 사용).