: 대 후 ::

Question

CSS 2.1 :after과 CSS 3 ::after 의사 선택기 (이전 브라우저에서는 ::after이 아닌 것은 제외)와 기능상의 차이점이 있습니까? 새로운 사양을 사용할 실제적인 이유가 있습니까?

Answer 1

의사 - 클래스 대 의사 - 요소 구분. (잠시 동안 주변에 있었다 당신은 IE8 지원이 필요한 경우 단일 콜론과 함께 사용할 수 있습니다) ::first-line, ::first-letter, ::before 및 ::after 제외

는 요소이 더블 콜론을 필요로 의사 -.

의사 클래스를 사용하면, 예를 들어, 사업부의 첫 번째 또는 특정 <p> 년대를 선택 :first-child 또는 :nth-of-type(n)을 사용할 수 있습니다, 실제 요소 자체를 선택.
(및 :hover:focus과 같은 실제 요소의 상태).

의사 요소 ::first-line::first-letter 또는 자신의 오른쪽에있는 요소없는 것 같은 요소의 하위 부분을 타겟팅.

---

사실, 더 나은 여기에 설명 : 또한 여기 http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
: ::after 같은 http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

Answer 2

CSS 셀렉터는 DOM 트리의 명시적인 요소로 사용할 수없는 몇 가지 가상 요소입니다. 그들은 "Pseudo-Elements"라고 및 요소 (예 : ::before, ::after) 후/전 삽입에 일부 콘텐츠를 사용하는 (: ::first-letter 예) 요소의 일부을 선택 나. 현재 단지 5 개의 표준 유사 요소가 있습니다 : after, before, first-letter, first-line, selection. 한편

, 소자의 특별한 상태을 정의하는 데 사용되는 "Pseudo-Classes"라는 선택기 다른 형태가있다 (같은 :hover, :focus, :nth-child(n) 등). 이것들은 DOM의 기존 요소 전체를 선택합니다. 의사 클래스는 30 개가 넘는 항목이있는 긴 목록입니다.

는 초기 (CSS1 및 CSS2에서) 단일 콜론 구문 가상 클래스와 유사 요소 모두에서 사용 하였다. 그러나, CSS3에 :: 구문은 의사 요소가 더 나은 그들을 구별하기위한 : 표기법을 교체했다.

이전 버전과의 호환성을 위해 이전의 단일 콜론 구문은 :after과 같은 유사 요소에 사용할 수 있습니다 (브라우저는 여전히 모든 구문을 세미콜론으로 지원함). IE8 만 새로운 구문을 지원하지 않습니다 (IE8을 지원하려면 단일 콜론 사용).

는