CSS 의사 요소와 의사 클래스는 CSS를 처음 배우는 학생들에게 쉽게 혼동될 수 있습니다. 공식 문서에서는 다음과 같이 설명합니다. CSS 의사 클래스는 특정 선택기에 특수 효과를 추가하는 데 사용되며 CSS 의사 요소는 특수 효과를 추가하는 데 사용됩니다. 일부 선택기에 추가되었습니다. 그렇다면 CSS 의사 요소와 의사 클래스의 차이점은 무엇입니까? 이 기사에서는 자세한 설명을 제공합니다.
우선 두 가지 점을 분명히 할 수 있습니다. 첫째, 둘 다 선택기와 관련이 있고 둘째, "특별한" 효과를 추가합니다. 여기서 특별한 점은 두 가지가 다른 css
설명할 수 없는 것을 설명한다는 것입니다.
의사 클래스 유형
의사 클래스 |
Function |
:active |
활성화된 요소에 스타일 추가 |
: focus |
선택한 요소에 스타일 추가 ㅋㅋㅋ | 추가 방문한 링크에 특수 스타일
:first-child |
요소의 첫 번째 하위 요소에 특수 스타일을 추가합니다. |
:lang |
작성자가 특정 요소에 사용되는 언어를 정의할 수 있습니다 |
: 첫 글자 |
: first=line
: before |
요소 앞에 항목 삽입 |
: after |
요소 뒤에 항목 삽입 |
Difference 여기서는 비교를 위해 의사 클래스 p>i:first-child {color: red} <p> <i>first</i> <i>second</i> </p> //伪类 .first-child {color: red} <p> <i class="first-child">first</i> <i>second</i> </p> 即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看为元素: p:first-letter {color: red} <p>I am stephen lee.</p> //伪元素 .first-letter {color: red} <p><span class='first-letter'>I</span> am stephen lee.</p> 即我们给第一个字母添加一个 伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。 最后 伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 :Pseudo-classes ::Pseudo-elements//Pseudo-class :first-child 첫 번째 하위 요소에 스타일 추가 가상 클래스를 사용하지 않고 위의 효과를 얻으려면 다음을 수행할 수 있습니다. rrreee즉, 첫 번째 하위 요소에 클래스를 추가한 다음 이 클래스의 스타일을 정의합니다. 그런 다음 요소의 첫 글자에 스타일을 추가하는 방법을 살펴보겠습니다. rrreee // 의사 요소 의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있는 반면, 의사 요소의 효과는 실제 요소를 추가하여 달성해야 합니다. 이것이 바로 그 중 하나를 의사 클래스라고 부르는 이유입니다. 다른 하나는 의사 요소 이유라고 합니다. 의사 요소와 의사 클래스가 이렇게 혼동하기 쉬운 이유는 효과도 비슷하고 작성 방법도 비슷하기 때문인데 사실 |
위 내용은 CSS 속성: CSS 의사 클래스와 CSS 의사 요소의 차이점(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!