css中的伪元素和伪类的区别

在使用css的时候经常分不清哪些是伪类，哪些是伪元素。可能知道怎么用，但概念分不清。

今天想到这个问题了就自己总结了一下，方便以后查看。

首先谈谈什么是伪元素：伪元素不是实际存在的页面元素，但是其用法和表现行为与真正的页面元素是一样的，可以对其使用诸如页面一样的css样式。他的实质是css样式展示的行为。

这里先介绍以下伪类和伪元素中的：和:: 的区别，双冒号是css3中出现的，用于区别伪类和伪元素，伪类使用单冒号，伪元素使用双冒号。在低版本浏览器中 :before是伪元素，但是在高版本浏览器中，:before会被自动识别伪::before。

伪元素主要包含以下几个：

1、element::before

在元素的开头添加一个元素,该元素默认为行内元素，可以使用display转化为块级元素。

例如下面这段代码，在div的前面插入一段文本内容。

注意：伪元素中的content是不能省略的。

div::before {
  content:"开始";
}

2、element::after

在元素的结尾添加一个元素,该元素默认为行内元素，可以使用display转化为块级元素。

下面这段代码，在div的后面插入一段文本内容。


div::after {
  content:"结束";
}

3、element::first-letter

first-letter只能作用于块级元素

::first-letter用于设置元素的首字母的样式。

例如：设置p的第一个字或者单词字体大小为20px,颜色为hotpink。

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

::first-letter可以设置的样式有以下几个（w3c）：

4、element::first-line

first-line只能作用于块级元素

::first-line用于设置元素的第一行的样式。

p::first-line {
  color: skyblue;
}

first-line可以设置的样式（w3c）如下：

5、element::selection

用于设置选中元素或者高亮元素的样式

::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
p::selection
{
color:#ff0000;
}

E9+, Opera, Google Chrome和Safari支持::selection选择器。

Firefox 通过其私有属性 ::-moz-selection 支持。

由于伪类比较多，这里就不再一个一个介绍了，常见的有 :link、:visited、:hover、:active等等，除了上面介绍的五个伪元素，其他经常用到的基本上都是伪类。