CSS伪类与伪元素

一、伪类与伪元素

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里面的

好了拜拜！