一、伪类与伪元素

1.CSS伪类实用于用户应用批示设施虚指一个元素（没有激活它）的状况。在 CSS 中, 一个伪类选择器只根据元素的状态, 而不是元素在文档树中的信息, 来抉择指标对象。

举例子：:hover 这个款式会被任何与链接相干的伪类重写，像:link, :visited, 和 :active等。为了确保失效，:hover规定须要放在:link和:visited规定之后，然而在:active规定之前，依照LVHA的循程序申明:link－:visited－:hover－:active（记忆办法：LV好啊！示意LV包很好）。

2.CSS[伪元素]伪元素是一个附加至选择器末的关键词，容许你对被抉择元素的特定局部批改款式。
::after用来创立一个伪元素，作为已选中元素的最初一个子元素。通常会配合content属性来为该元素增加装璜内容。这个虚构元素默认是行内元素。

奢侈形容：
1.CSS伪类：为已存在的元素增加一个款式，然而这个款式却是不显示的，只有当用户执行了某个操作后才显示，比方hover伪类，只有用户鼠标通过时才会触发外面的款式。而且相似hover的还有active,link,visited这些，并且一个元素能够增加多个伪类。应用单冒号：前缀。
其款式写法：

：hover

2.CSS伪元素：为某个已存在的元素在其外面生成一个元素，留神，伪元素最多能够生成两个，对应的有before，与after，就是在某个元素的后面或者前面生成一个元素。应用单冒号或者双冒号前缀都能够。
其款式写法：

: berfore ::before   :after ::after

尽管单冒号，和双冒号都能够实现想要的后果，然而：
CSS3标准中的要求应用双冒号(::)示意伪元素，以此来辨别伪元素和伪类，比方::before和::after等伪元素应用双冒号(::)，:hover和:active等伪类应用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都反对伪元素的双冒号(::)示意办法

上面这两个是例子：

上面这个菜鸟教程的例子，我改了一下：

上面这个是网上的动画成果，其中船上的烟是伪类生成的：

关上F12你能够看到：boat的伪元素是生成在boat外面的

好了拜拜！