: 후 vs. :: 후
CSS 2.1 :after
과 CSS 3 ::after
의사 선택기 ( ::after
구형 브라우저에서 지원되지 않는 것) 사이에는 기능상의 차이가 있습니까? 최신 사양을 사용해야하는 실질적인 이유가 있습니까?
그것은 의사 클래스 대 의사 요소 구별입니다.
를 제외하고 ::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 이후 애프터 더블 콜론 표기법 /
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을 지원하려면 단일 콜론 사용).
참고 URL : https://stackoverflow.com/questions/8980475/after-vs-after
'Programming' 카테고리의 다른 글
NULL 재정의 (0) | 2020.07.17 |
---|---|
도커 호스트 OS와 컨테이너 기본 이미지 OS의 관계는 무엇입니까? (0) | 2020.07.17 |
c ++ 11 람다는 사용하지 않는 변수를 캡처합니까? (0) | 2020.07.17 |
MSDN 페이지에서 자동 텍스트 번역-끄는 방법? (0) | 2020.07.17 |
짧은 텍스트 문자열을위한 효율적인 압축 알고리즘 (0) | 2020.07.17 |