CSS에서 의사 클래스와 의사 객체(의사 요소)의 차이점은 무엇입니까

의사 클래스는 특정 선택기에 특수 효과를 추가하는 데 사용되며, 의사 요소는 특정 선택기에 특수 효과를 추가하는 데 사용됩니다. 의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있으며, 의사 객체의 효과는 실제 요소를 추가하여 얻을 수 있습니다. 간단히 말해서, 그들의 본질적인 차이는 추상적이든 아니든 새로운 요소를 만들어냅니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

의사 클래스와 의사 요소(의사 객체)의 근본적인 차이점은 새 요소를 생성하는지 여부입니다.

의사 요소/의사 개체: DOM 문서에 존재하지 않는 가상 요소이며 새 요소를 생성합니다. 요소의 하위 요소를 나타냅니다. 이 하위 요소는 논리적으로 존재하지만 실제로는 문서 트리에 존재하지 않습니다. ㅋㅋㅋ

E:첫 글자/E :: first-letterCSS3/CSS1

NoneCSS2/CSS1 E:first-letter/E::first-letter 의사 개체 선택기는 개체의 첫 번째 문자 스타일을 설정합니다. E:first-line/E::first-lineCS3/CSS1 의사 개체 선택기 E:first-line/E::first-line, 개체 설정 첫 번째 행의 스타일입니다. E:before/E::beforeCSS3/CSS2CSS3/CSS2CSS3

CSS3/CSS1

None

None

CSS3/CSS3 의사 개체 선택기 E:before/E::before, 개체 앞에 설정합니다(논리적 구조에 따라). 객체 트리) 무슨 일이 일어났나요? 콘텐츠 속성과 함께 사용됩니다

E:after/E::after

None

CSS3/CSS2 의사 객체 선택기 E:after/E::after, 객체 뒤에 설정( 무슨 일이 일어나는지 개체 트리의 논리적 구조에 따라). 콘텐츠 속성

E::selection

None

CSS3 의사 개체 선택기 E::selection과 함께 사용되며 개체가 선택될 때 개체의 색상을 설정합니다.

의사 클래스: DOM 문서에 논리적으로 존재하지만 문서 트리에서 식별할 필요가 없는 "유령" 범주입니다.

의사 클래스 선택기

Properties 속성	CSS Version Version	부모로부터 상속 상속	설명 소개
E:link	CSS1	없음	CSS1 의사 클래스 선택기 E:link는 방문하기 전에 하이퍼링크 a의 스타일을 설정합니다.
E:visited	CSS1	None	CSS1 의사 클래스 선택기 E:visited는 링크 주소를 방문했을 때 하이퍼링크 a의 스타일을 설정합니다.
E:hover	CSS2	None	CSS2/CSS1 의사 클래스 선택기 E:hover는 마우스로 요소를 가리킬 때 요소의 스타일을 설정합니다.
E:active	CSS2/CSS1	None	CSS2/CSS1 의사 클래스 선택기 E:active, 사용자가 활성화할 때 요소의 스타일을 설정합니다(마우스 클릭과 클릭 사이에 발생하는 이벤트). 풀어 주다).
E:focus	CSS2/CSS1	None	CSS2/CSS1 의사 클래스 선택기 E:focus는 입력 포커스가 될 때 요소의 스타일을 설정합니다(요소의 onfocus 이벤트 발생).
E:lang()	CSS2	None	CSS2 의사 클래스 선택기 E:lang()은 특수 언어를 사용하여 E 요소와 일치합니다.
E:not()	CSS3	None	CSS3 의사 클래스 선택기 E:not()는 s 선택기를 포함하지 않는 요소 E와 일치합니다.
E:root	CSS3	None	CSS3 의사 클래스 선택기 E:root는 문서의 루트 요소에 있는 E 요소와 일치합니다.
E:first-child	CSS2	None	CSS2 의사 클래스 선택기 E:first-child는 상위 요소의 첫 번째 하위 요소 E와 일치합니다.
E:last-child	CSS3	None	CSS3 의사 클래스 선택기 E:last-child는 상위 요소의 마지막 하위 요소 E와 일치합니다.
E:only-child	CSS3	None	CSS3 예를 들어 선택기 E:only-child는 상위 요소의 유일한 하위 요소 E와 일치합니다.
E:nth-child(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-child(n)은 상위 요소의 n번째 하위 요소 E와 일치합니다.
E:nth-last-child(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-last-child(n)는 상위 요소 하단에서 n번째 하위 요소 E와 일치합니다. .
E:first-of-type	CSS2	None	CSS3 의사 클래스 선택자 E:first-of-type은 동일한 유형의 첫 번째 형제 요소 E와 일치합니다.
E:last-of-type	CSS3	None	CSS3 의사 클래스 선택기 E:last-of-type은 동일한 유형의 마지막 형제 요소 E와 일치합니다.
E:only-of-type	CSS3	None	CSS3 의사 클래스 선택자 E:only-of-type은 동일한 유형의 유일한 형제 요소 E와 일치합니다.
E:nth-of-type(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-of-type(n)은 동일한 유형 E의 n번째 형제 요소와 일치합니다.
E:nth-last-of-type(n)	CSS3	None	CSS3 의사 클래스 선택기 E:nth-last-of-type(n)은 동일한 클래스의 마지막에서 n번째와 일치합니다. 형제 요소 E를 입력합니다.
E:empty	CSS3	None	CSS3 의사 클래스 선택기 E:empty는 하위 요소(텍스트 노드 포함) 없이 요소 E와 일치합니다.
E:checked	CSS3	None	CSS3 의사 클래스 선택기 E:checked는 사용자 인터페이스에서 선택한 요소 E와 일치합니다. (입력 유형이 라디오 및 체크박스인 양식 요소의 경우)
E:enabled	CSS3	None	CSS3 의사 클래스 선택기 E:enabled는 사용자 인터페이스에서 사용 가능한 상태의 요소 E와 일치합니다.
E:disabled	CSS3	None	CSS3 의사 클래스 선택기 E:disabled는 사용자 인터페이스의 비활성화된 요소 E와 일치합니다.
E:target	CSS3	None	CSS3 의사 클래스 선택기 E:target은 관련 URL이 가리키는 E 요소와 일치합니다.
@page:first	CSS2	None	CSS2 의사 클래스 선택기 @page:first 페이지 컨테이너의 첫 번째 페이지에 사용되는 스타일을 설정합니다. @page 규칙에만 사용됩니다
@page:left	CSS2	None	CSS2 의사 클래스 선택기 @page:left 페이지 컨테이너가 여백 왼쪽에 있는 모든 페이지에서 사용되는 스타일을 설정합니다. . @page 규칙에만 해당
@page:right	CSS2	None	CSS2 개체 선택기 @page:right에 여백 오른쪽에 페이지 컨테이너가 있는 모든 페이지에 사용되는 스타일을 설정합니다. @page 규칙에만 해당

W3C의 두 애플리케이션에 대한 설명을 보세요.

Pseudo-class: 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.
Pseudo-element: 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.
실제로는 기본적으로 다음을 의미합니다. 클래스, ID 등으로 선택할 수 없는 요소를 보완하세요.

예:

<div>
    <p>a</p>
    <p>b c</p>
</div>

첫 번째 p 태그의 글꼴 색상을 빨간색으로 바꾸고 싶다면 의사 클래스를 사용하면 매우 간단해집니다.

p:first-child {
    color: red;
}

하지만 의사 클래스를 사용하지 않고 어떻게 할 수 있나요? 이때 동일한 효과를 얻으려면 첫 번째 p 태그

<div>
    <p class="first-child">a</p>
    <p>b c</p>
</div>

p:first-child {
    color: red;
}

에 클래스를 추가해야 하지만 클래스를 하나 더 작성해야 합니다.

의사 요소를 사용하는 경우 위의 작업을 어떻게 수행할 수 있나요?

p::first-letter {
    color: red;
}

의사 요소 없이 어떻게 할 수 있나요?

<div>
    <p><span>a</span></p>
    <p>b c</p>
</div>

p span {
    color: red;
}

두 가지의 차이점을 알 수 있는데,

실제 클래스를 추가하면 의사 클래스의 효과를 얻을 수 있습니다.

실제 요소를 추가하면 의사 요소의 효과를 얻을 수 있습니다.

그래서 본질적인 차이점은 그 사이에는 추상화가 새로운 요소를 생성하는지 여부가 있습니다

참고:

의사 클래스는 ":"만 사용할 수 있습니다:” 

而伪元素既可以使用“:”，也可以使用“::

그리고 의사 요소는 ": 중 하나를 사용할 수 있습니다. " 또는 "::"

의사 클래스는 클래스 추가와 유사하기 때문에 여러 개가 될 수 있는 반면, 의사 요소는 선택기에서 한 번만 나타날 수 있고 마지막에만 나타날 수 있습니다

관련 질문:

:after/::after와 :before/::before

의 유사점과 차이점:

은 의사 클래스 개체를 나타내는 데 사용할 수 있으며 이전 내용을 설정하는 데 사용할 수 있습니다. object

:before 및 ::before 쓰기 방법은 동일합니다. :after 및 ::after 쓰기 방법은 동일합니다.

차이점:

:before/:after는 Css2의 쓰기 방법입니다. ::before/:: Css3에서는 after가 작성 방법입니다

:before/ :after는 ::before/::after보다 호환성이 좋습니다.

그러나 H5 개발에서는 ::before/::after를 사용하는 것이 좋습니다

참고:

pseudo 객체는 content 속성과 함께 사용해야 합니다.

Pseudo 객체는 DOM에 나타나지 않으므로 js를 통해 작동할 수 없습니다.

pseudo 객체의 특수 효과만 추가됩니다. 일반적으로 :hover 의사 클래스 스타일을 사용하여 활성화해야 합니다.

예: 마우스가 범위 위로 이동할 때 업로드할 때 범위 앞에 "duang"을 삽입하세요

<style>
span{
  background: yellow;
}
span:hover::before{
  content:"duang";
}
</style>
 
<span>222</span>

(동영상 공유 학습: css 동영상 튜토리얼

)🎜

위 내용은 CSS에서 의사 클래스와 의사 객체(의사 요소)의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!