CSS 속성: CSS 의사 클래스와 CSS 의사 요소의 차이점(코드 포함)

CSS 의사 요소와 의사 클래스는 CSS를 처음 배우는 학생들에게 쉽게 혼동될 수 있습니다. 공식 문서에서는 다음과 같이 설명합니다. CSS 의사 클래스는 특정 선택기에 특수 효과를 추가하는 데 사용되며 CSS 의사 요소는 특수 효과를 추가하는 데 사용됩니다. 일부 선택기에 추가되었습니다. 그렇다면 CSS 의사 요소와 의사 클래스의 차이점은 무엇입니까? 이 기사에서는 자세한 설명을 제공합니다.

우선 두 가지 점을 분명히 할 수 있습니다. 첫째, 둘 다 선택기와 관련이 있고 둘째, "특별한" 효과를 추가합니다. 여기서 특별한 점은 두 가지가 다른 css 설명할 수 없는 것을 설명한다는 것입니다.

의사 클래스 유형

추가 방문한 링크에 특수 스타일의사 요소 유형의사 요소Function특수 스타일 추가 문자

의사 클래스	Function
:active	활성화된 요소에 스타일 추가
: focus	선택한 요소에 스타일 추가 ㅋㅋㅋ
:first-child	요소의 첫 번째 하위 요소에 특수 스타일을 추가합니다.
:lang	작성자가 특정 요소에 사용되는 언어를 정의할 수 있습니다
	: 첫 글자

: first=line

텍스트의 첫 번째 줄에 특수 스타일 추가

: before	요소 앞에 항목 삽입
: after	요소 뒤에 항목 삽입
Difference 여기서는 비교를 위해 의사 클래스 :first-child와 의사 요소 :first-letter를 사용합니다. :first-child 和伪元素 :first-letter 来进行比较。 p>i:first-child {color: red} <p>     <i>first</i>     <i>second</i> </p> //伪类 :first-child 添加样式到第一个子元素 如果我们不使用伪类，而希望达到上述效果，可以这样做： .first-child {color: red} <p>     <i>first</i>     <i>second</i> </p> 即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看为元素： p:first-letter {color: red} <p>I am stephen lee.</p> //伪元素 :first-letter 添加样式到第一个字母 那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？ .first-letter {color: red} <p><span>I</span> am stephen lee.</p> 即我们给第一个字母添加一个 span，然后给 span 增加样式。 两者的区别已经出来了。那就是： 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。 最后 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 :Pseudo-classes ::Pseudo-elements //Pseudo-class :first-child 첫 번째 하위 요소에 스타일 추가 가상 클래스를 사용하지 않고 위의 효과를 얻으려면 다음을 수행할 수 있습니다. rrreee 즉, 첫 번째 하위 요소에 클래스를 추가한 다음 이 클래스의 스타일을 정의합니다. 그런 다음 요소의 첫 글자에 스타일을 추가하는 방법을 살펴보겠습니다. rrreee // 의사 요소 :first-letter 그렇다면 위의 효과를 얻으려면 어떻게 해야 합니까? rrreee즉, 첫 글자에 span을 추가하고 span에 스타일을 추가합니다. 둘의 차이점이 나왔습니다. 즉, 의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있는 반면, 의사 요소의 효과는 실제 요소를 추가하여 달성해야 합니다. 이것이 바로 그 중 하나를 의사 클래스라고 부르는 이유입니다. 다른 하나는 의사 요소 이유라고 합니다. 결국 의사 요소와 의사 클래스가 이렇게 혼동하기 쉬운 이유는 효과도 비슷하고 작성 방법도 비슷하기 때문인데 사실 css3에는 의사 요소가 명확히 규정되어 있습니다. 둘을 구별하기 위해 클래스는 하나의 콜론으로 표시되고 의사 요소는 두 개의 콜론으로 표시됩니다. rrreee🎜하지만 호환성 문제로 인해 대부분은 여전히 ​​하나의 콜론으로 통일되어 있습니다. 하지만 호환성 문제와 상관없이 글을 쓸 때 좋은 습관을 기르고 둘을 구별하도록 최선을 다해야 합니다. 🎜🎜추천 관련 기사: 🎜🎜🎜css-pseudo-classes 및 pseudo-elements_html/css_WEB-ITnose🎜🎜🎜🎜🎜CSS 속성: 사용 전 && : 사용 후, pseudo-classes와 pseudo-elements_html/css_WEB-ITnose의 차이점 🎜🎜🎜🎜🎜CSS 의사 요소란 무엇인가요? CSS 의사 요소 사용에 대한 자세한 설명🎜🎜

위 내용은 CSS 속성: CSS 의사 클래스와 CSS 의사 요소의 차이점(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!