CSS 属性 - 伪类和伪元素的区别

前言：
之前自己一直没有弄清楚伪类和伪元素的区别，所以自己打算总结回顾一下。

一、伪类和伪元素的定义

伪类(Pseudo-classes)

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

伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

分析一下有2点共同点：

• 作用于选择器
• 显示特殊效果

二、伪类和伪元素分类

伪类的分类

Markdown

伪元素分类

Markdown

三、伪类和伪元素的区别

这里用伪类 :first-child 和伪元素 ::first-letter 来进行比较。

//css
.par p:first-child{
  color:red;
}

<div class='par'>
    <p class='one'>123</p>
    <p class='two'>456</p>
</div>  

//伪类 :first-child将样式添加给第一个p子元素

Markdown

但是如果不用伪类first-child，那么应该怎么显示这个效果呢？我们来试试

//css
.one{
  color:red;
}

<div class='par'>
    <p class='one'>123</p>
    <p class='two'>456</p>
</div>  

效果是一样的，伪类 :first-child相当于给子元素添加一个类并且定义样式

我们来看看伪元素::first-letter

//CSS
.text:first-letter{
  color: red
}
 <p class='text'>文本啊</p>

Markdown

但是，如果我们不用伪元素::first-letter，应该怎么显示这个效果呢？
我们继续来尝试一下

//css
.text-one{
   color: red;
}

<p><span class='text-one'>文</span>本啊</p>

到达这样的效果，我先添加元素span，然后添加样式。

到这里伪类和伪元素的区别已经很明显了

针对作用选择器的效果，伪类需要添加类来达到效果，而伪元素需要增加元素，所以一个叫伪类，另外一个叫伪元素。

由于二者之间产生的效果十分相似，所以CSS3标准里，为了区分二者已经规定伪类用单冒号:，伪元素用双冒号::，但是由于兼容性问题，大部分还是使用单冒号，如果不存在兼容问题，还是建议使用标准写法。

:Pseudo-classes

::Pseudo-elements

个人水平有限，如有不对之处，还望指正！！！

---

参考链接

谈谈css的伪类和伪元素

详解 CSS 属性 - 伪类和伪元素的区别

CSS中伪类及伪元素用法详解