CSS 技巧篇(四)：伪类与伪元素的区别

目录：

• 伪类介绍
• 伪元素介绍
• 区别
• 总结

一、伪类介绍

CSS 伪类用于向某些选择器添加特殊的效果。

二、伪元素介绍

CSS 伪元素用于将特殊的效果添加到某些选择器。

三、区别

我们通过使用伪类 :first-child 和伪元素 :first-letter 来进行比较。

1）、伪类:first-child 添加样式到第一个子元素

div>p:first-child{color:red;} 

<div>
  <p>我是第一个</p>
  <p>我是第二个</p>
</div>

如果我们不使用伪类，而希望达到上述效果，可以这样做：

.first-p{color:red;}
<div>
  <p class="first-p">我是第一个</p>
  <p>我是第二个</p>
</div>

即我们给第一个子元素添加一个类，然后定义这个类的样式。

2）、伪元素:first-letter 添加样式到第一个字母

h3::first-letter{color:blue;}
<h3>I love Js</h3>

那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

span.first-letter{color:blue;}
<h3><span class="first-letter">I</span> love Js</h3>

即我们给第一个字母添加一个 span，然后给 span 增加样式。

四、总结

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

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