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

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 class="first-child">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 class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

最后

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3

:Pseudo-classes
::Pseudo-elements

가상 클래스를 사용하지 않고 위의 효과를 얻으려면 다음을 수행할 수 있습니다.

즉, 첫 번째 하위 요소에 클래스를 추가한 다음 이 클래스의 스타일을 정의합니다. 그런 다음 요소의 첫 글자에 스타일을 추가하는 방법을 살펴보겠습니다.

// 의사 요소 :first-letter 그렇다면 위의 효과를 얻으려면 어떻게 해야 합니까? rrreee즉, 첫 글자에 span을 추가하고 span에 스타일을 추가합니다.
둘의 차이점이 나왔습니다. 즉,

의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있는 반면, 의사 요소의 효과는 실제 요소를 추가하여 달성해야 합니다. 이것이 바로 그 중 하나를 의사 클래스라고 부르는 이유입니다. 다른 하나는 의사 요소 이유라고 합니다.
결국

의사 요소와 의사 클래스가 이렇게 혼동하기 쉬운 이유는 효과도 비슷하고 작성 방법도 비슷하기 때문인데 사실 css3에는 의사 요소가 명확히 규정되어 있습니다. 둘을 구별하기 위해 클래스는 하나의 콜론으로 표시되고 의사 요소는 두 개의 콜론으로 표시됩니다.