CSS3의 의사 클래스와 의사 요소의 차이점과 주의사항

CSS에서 의사 클래스와 의사 요소의 개념은 혼동되기 쉽습니다.

오늘은 의사 클래스와 의사 요소의 차이점에 대해 이야기해 보겠습니다

---

정의

먼저 의사 클래스와 의사 요소의 정의를 살펴보겠습니다
w3c는 이렇게 설명합니다

• 유사 클래스: 특정 선택자에 특수 효과를 추가하는 데 사용

• 유사 요소: 특정 선택자에 특수 효과를 추가하는 데 사용

솔직히 내 중국어가 좋지 않을 수도 있는데, 이 두 문장은 같다고 생각합니다:-)
전혀 차이점을 볼 수 없습니다
둘 다 일부 선택기에 "추가"를 추가합니다. "

표준에는 다음과 같은 문장이 있는데, 이를 다음과 같이 번역합니다.

CSS는 이를 구현하기 위해 의사 클래스와 의사 요소의 개념을 도입합니다. 트리 밖의 정보 포맷

을 기반으로 한 문서는 사실 클래스, id를 통해 선택할 수 없는 보충적인 요소를 의미합니다. 등

차이

이 차이를 이해하려면 예가 필요합니다

<p>
    <em>This</em>
    <em>is a text</em></p>

첫 번째 글꼴 색상을 원하면 어떻게 될까요? em 태그가 빨간색이 되려면
익숙한 의사 클래스를 사용하면 쉽습니다

rree

그런데 의사 클래스가 없으면 어떻게 하나요?
이것이 첫 번째 em에 대해 해야 할 일입니다.

em:first-child {    color: red;}

<p>
    <em class="first-child">This</em>
    <em>is a text</em></p>

---

em.first-child {    color: red;}

태그 클래스를 추가하면 동일한 효과를 얻을 수 있습니다. 여전히 이 예는
이제 첫 번째를 원합니다. 이 단락의 문자를 빨간색으로 바꾸려면
수행 방법
이번에는 의사 요소를 사용해야 합니다

<p>
    <em>This</em>
    <em>is a text</em></p>

마찬가지로 의사 요소가 존재하지 않는다고 가정합니다
현재로서는 이를 달성하기 위해 스팬 태그만 중첩할 수 있습니다

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

<p>
    <em><span>T</span>his</em>
    <em>is a text</em></p>

---

이 내용을 보고 나면 모두가 왜 하나는 의사 클래스라고 부르고 다른 하나는 의사 요소라고 부르는지 이해하셨으리라 믿습니다.
실제 클래스를 추가하면 의사 클래스의 효과를 얻을 수 있습니다.
실제 요소를 추가하면 의사 클래스의 효과를 얻을 수 있습니다.
두 클래스의 본질적인 차이점은 추상화가 새로운 요소를 생성하는지 여부

역사

의사 클래스는 원래 동적 요소(일반적인 앵커 의사 클래스 링크, 방문, 호버, 활성)를 나타내는 데 사용되었습니다.

CSS2 표준에서 확장되었습니다. 따라서 논리적으로 존재하더라도 DOM 트리에서 식별할 필요가 없습니다.
의사 요소는 특정 요소를 나타냅니다. 요소의 하위 요소는 논리적으로 존재하지만 DOM 트리에는 존재하지 않습니다.

그 개념은 우리가 쉽게 혼동할 수 있지만

일반적인 사용에는 영향을 미치지 않습니다

CSS3에 있습니다. 선택기 소개 및 사용법 요약에서 언급했듯이

의사 클래스는 ":"
그리고 의사 요소는 ":" 또는 "::"을 사용할 수 있습니다.
여기서 그 이유를 설명하겠습니다

---

CSS3의 표준은 의사 클래스가 단일 콜론을 사용한다는 것입니다. ":"

및 의사 요소는 이중 콜론 "::"을 사용합니다(혼란을 피하기 위해)
하지만 그 전에는 의사 클래스인지 의사 요소인지 모두 단일 콜론 ":"을 사용합니다.
그래서 의사요소와의 호환성을 확보하기 위해서는 의사요소를 사용하는 두 가지 방법이 모두 가능합니다
다만, IE의 하위 버전에서는 이중 콜론 호환성 문제가 있습니다
따라서 과거에 스타일을 작성했던 사람들은 의사요소에 익숙하지 않습니다. 클래스와 의사 요소는 단순히 단일 콜론
을 사용하므로 이러한 혼란이 계속 발생합니다

참고

가상 클래스와 의사 요소를 사용할 때

지불해야 할 한 가지가 있습니다. 특히 주의하세요
의사 클래스는 실제 클래스와 동일하며 조합하여 사용할 수 있습니다
상호 배타적이지 않은 한 개수에는 제한이 없습니다
예를 들어 다음은

p span {    color: red;}

완전히 괜찮습니다

하지만 여기서는 "and" 관계
입니다. 이는 "첫 번째 자식" 첫 번째 자식 요소
와 "hover" 커서를 모두 충족해야 함을 의미합니다. 정지

---

의사 요소는 엄격해야 합니다

의사 요소는 선택기에서 한 번만 나타날 수 있고 마지막에만 나타날 수 있습니다 (일부 학생 여기서 오해해서 수정했습니다)
아래와 같이 스타일을 적용할 수 없습니다

em:first-child:hover {    color: red;}

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;}

---

우선순위 가중치 계산 시
의사 클래스는 클래스와 동일한 우선순위를 갖습니다
의사 요소는 태그와 동일한 우선순위를 갖습니다

요약

• 의사 클래스와 의사 요소는 모두 특수 항목을 추가하는 데 사용됩니다. 선택기에 대한 효과

• 의사 클래스와 의사 요소의 본질적인 차이점은 추상화가 새로운 요소를 생성하는지 여부입니다.

• 의사 클래스는 상호 배타적이지 않은 한 중첩됩니다.

• 유사 요소는 선택자에서 한 번만 나타날 수 있고 마지막에만 나타날 수 있습니다.

• Pseudo-class와 pseudo-element의 우선순위는 각각 클래스와 태그의 우선순위와 같습니다

위 내용은 CSS3의 의사 클래스와 의사 요소의 차이점과 주의사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!