CSS中的伪元素和伪类

CSS伪类

什么叫伪类呢？

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

CSS的现有标准中，伪类包括：

• :first-child 点我看手册，应用第一个子元素
• :link 点我看手册，应用未访问过的链接
• :visited 点我看手册，应用已访问过的链接
• :hover 点我看手册，应用鼠标指针悬浮的元素
• :active 点我看手册，应用活动的链接
• :focus 点我看手册，应用聚焦的输入元素
• :lang 点我看手册，伪类将应用于元素带有指定lang的情况，不常用

CSS伪元素

什么是伪元素呢？

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS的现有标准中，伪元素包括：

• :first-letter 点我看手册，伪元素的样式将应用于元素文本的第一个字（母）
• :first-line 点我看手册，伪元素的样式将应用于元素文本的第一行
• :before 点我看手册，在元素内容的最前面添加新内容
• :after 点我看手册，在元素内容的最后面添加新内容

伪类和伪元素的相同之处：

伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。

伪类和伪元素的不同之处：

伪类其实就是基于普通DOM元素而产生的不同状态，他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象，而且这些抽象对象是能够访问到的。

总结：伪元素产生新对象，在DOM树中看不到，但是可以操作；伪类不产生新的对象，仅是DOM中一个元素的不同状态；