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

1、伪类介绍

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

2、伪元素介绍

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

3、区别

咱们经过使用伪类 :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 增长样式。

4、总结

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

伪类的效果能够经过添加一个实际的类来达到，而伪元素的效果则须要经过添加一个实际的元素才能达到，这也是为何他们一个称为伪类，一个称为伪元素的缘由。