htmledit_views">

一、两者的定义
1.伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。

2.伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树中。

二、区别
1.伪类是通过在元素选择器上加入伪类改变元素状态。

2.伪元素通过对元素的操作进行对元素的改变。

相同点：都是属于选择器中的一种，能实现对于页面元素的修饰

不同点：
1、概念不同：伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的；例如鼠标的悬停效果；伪元素：用于创建一些不在DOM树中的元素，并为其添加样式；例如：先前向后插入元素内容等等

2、使用方法不同：css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）目前来看有一部分浏览器为了达到一个更好的兼容性的问题，我们的双冒号也可以写成单冒号；但是在一些低版本浏览器里面有些时候还是需要使用双冒号的；

.first-child last-child nth-child(n/odd/even)

这三个属于结构伪类，常用来给表格或者列表添加样式。

• 假设父元素是一个div，使用样式class=‘box’；
• 那么当定义.box:first-child或者.box:last-child时分别是指给div的第一个或者最后一个子元素添加样式。
• nth-child这个就比较牛掰了，参数是一个数值代表给第几个元素添加样式，如果是odd标示给元素为奇数的添加样式，even则是给是偶数的元素添加样式。
  看个例子，首行添加灰色背景,其他奇数行橙色背景的一个表格
• 效果图
•