그 중에서 위류와 위원소의 근본적인 차이는 그들이 새로운 원소를 창조했는지의 여부에 있다.
위조 요소/위조 객체: DOM 문서에 존재하지 않으며 가상 요소이며 새 요소를 만듭니다.어떤 요소를 대표하는 하위 요소입니다. 이 하위 요소는 논리적으로 존재하지만 문서 트리에 실제로 존재하지 않습니다.

위조 대상 선택자

E:first-letter/E::first-letter
CSS1/3
객체의 첫 번째 문자 스타일을 설정합니다.
E:first-line/E::first-line
CSS1/3
객체의 첫 번째 행에 대한 스타일을 설정합니다.
E:before/E::before
CSS2/3
객체 앞에서(객체 트리의 논리 구조에 따라) 발생하는 내용을 설정합니다.콘텐츠 속성과 함께 사용하기
E:after/E::after
CSS2/3
대상 트리의 논리 구조에 따라 발생하는 내용을 설정합니다.콘텐츠 속성과 함께 사용하기
E::placeholder
CSS3
객체 문자 자리 표시자 스타일을 설정합니다.
E::selection
CSS3
객체가 선택될 때의 색상을 설정합니다.
위조 클래스: DOM 문서에 존재하고 논리적으로 존재하지만 문서 트리에 표시할 필요가 없는'유령'분류입니다.

위조 클래스 선택기

 
E:link
CSS1
하이퍼링크 a가 접근하기 전의 스타일을 설정합니다.
E:visited
CSS1
하이퍼링크 a가 링크 주소에 접근한 지 오래된 스타일을 설정합니다.
E:hover
CSS1/2
마우스를 롤오버할 때 요소의 스타일을 설정합니다.
E:active
CSS1/2
사용자가 활성화할 때 (마우스 클릭과 놓기 사이에서 발생하는 이벤트) 요소의 스타일을 설정합니다.
E:focus
CSS1/2
원소가 입력 초점 (이 원소의 onfocus 이벤트 발생) 이 될 때의 스타일을 설정합니다.
E:lang(fr)
CSS2
특수 언어를 사용하는 E 요소를 일치시킵니다.
E:not(s)
CSS3
s 선택자가 없는 요소 E와 일치합니다.
E:root
CSS3
문서에서 E 요소의 루트 요소와 일치합니다.
E:first-child
CSS2
부모 요소의 첫 번째 하위 요소 E와 일치합니다.
E:last-child
CSS3
부모 요소의 마지막 하위 요소 E와 일치합니다.
E:only-child
CSS3
부모 원소의 유일한 하위 원소 E와 일치합니다.
E:nth-child(n)
CSS3
상위 요소의 n번째 하위 요소 E와 일치합니다.
E:nth-last-child(n)
CSS3
부모 요소의 마지막 n번째 하위 요소 E와 일치합니다.
E:first-of-type
CSS3
같은 유형의 첫 번째 형제 요소 E와 일치합니다.
E:last-of-type
CSS3
같은 유형의 마지막 형제 요소 E와 일치합니다.
E:only-of-type
CSS3
같은 유형 중 유일한 형제 요소 E와 일치합니다.
E:nth-of-type(n)
CSS3
같은 유형의 n번째 형제 요소 E와 일치합니다.
E:nth-last-of-type(n)
CSS3
같은 유형의 마지막 n번째 형제 요소 E와 일치합니다.
E:empty
CSS3
텍스트 노드를 포함하여 하위 요소가 없는 요소 E와 일치합니다.
E:checked
CSS3
사용자 인터페이스에서 선택한 요소 E와 일치합니다.(input type이 라디오와 checkbox일 때)
E:enabled
CSS3
사용자 인터페이스에서 사용 가능한 상태의 요소 E와 일치합니다.
E:disabled
CSS3
사용자 인터페이스에서 비활성화된 요소 E와 일치합니다.
E:target
CSS3
관련 URL이 가리키는 E 요소와 일치합니다.
@page:first
CSS2
페이지 컨테이너의 첫 페이지에 사용할 스타일을 설정합니다.@page 규칙에만 사용
@page:left
CSS2
페이지 용기가 제본선 왼쪽에 있는 모든 페이지에 사용할 스타일을 설정합니다.@page 규칙에만 사용
@page:right
CSS2
페이지 용기가 제본선 오른쪽에 있는 모든 페이지에 사용할 스타일을 설정합니다.@page 규칙에만 사용
W3C에서 양자 응용에 대한 설명을 살펴보자.
위조: 일부 선택기에 특수 효과 추가위조 원소: 일부 선택기에 특수한 효과를 추가하는 데 사용합니다사실 근본적인 의미는class, id 등을 통해 선택할 수 없는 요소에 대한 보충이다
밤을 들다.

    
a
    
b c

만약 우리가 첫 번째 p 라벨 글꼴의 색을 붉게 하려면 어떻게 해야 합니까? 위조 클래스를 사용하면 매우 간단합니다. p:first-child { color: red; } 그런데 위류를 안 쓰면 저희가 어떻게 할까요?이 때 우리는 첫 번째 p 탭에 클래스class를 추가해야 한다 a b c p:first-child { color: red; } 같은 효과를 실현할 수 있으나, 하나의 종류를 더 써야 한다. 만약 위조 원소를 사용한다면 어떻게 상술한 조작을 실현해야 합니까? p::first-letter { color: red; } 만약 위원소를 쓰지 않는다면 우리는 어떻게 합니까?

a b c p span { color: red; } 양자의 차이를 알 수 있고,

위류의 효과는 실제 종류를 첨가하여 실현할 수 있다 위조 원소의 효과는 실제 원소를 첨가하여 실현할 수 있다

그래서 그들의 본질적인 차이는 추상적으로 새로운 요소를 창조했는지의 여부이다.

위조 클래스는 ":" 만 사용할 수 있습니다 반면 위조 요소는 ":" 또는 ":" 을 사용할 수 있습니다. 위조 클래스는 추가 클래스와 유사하기 때문에 여러 개가 될 수 있지만 위조 요소는 한 선택기에서 한 번만 나타날 수 있고 끝에만 나타날 수 있다

관련 문제

:after/:after와:before/:before의 공통점

공통점
위조 대상을 나타낼 수 있고 대상 앞의 내용을 설정할 수 있다: before 및: before 쓰기는 동일합니다.after 및: after 쓰기 방법은 동일 값차이점
:before/:after는 Css2의 쓰기 방법,:before/:after는 Css3의 쓰기 방법:before/:after의 호환성은:before/:after가 좋다그러나 H5 개발에서는:before/:after가 좋다참고:
위조 대상은 콘텐츠 속성과 함께 사용해야 한다위조 대상은 DOM에 나타나지 않기 때문에 js를 통해 조작할 수 없고 CSS 렌더링 층에만 가입가짜 대상의 특수효과는 보통:hover 가짜 스타일로 활성화eg: 마우스를 span에 옮길 때 span 앞에 "duang"삽입

222