伪元素主要有以下六个:

::first-line

::first-letter

::after

::before

::selection

::backdrop

有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。只有 ::selection 永远只能以两个冒号开头(::)。

::first-line

:first-line用于向文本的首行设置特殊样式,只能用于块级元素。

可应用于 "first-line" 伪元素的属性有:

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

::first-letter

:first-letter用于向文本的首字母设置特殊样式。只能用于块级元素。

可应用于 "first-letter" 伪元素的属性有:

font

color

background

margin

padding

border

text-decoration

vertical-align (仅当 float 为 none 时)

text-transform

line-height

float

clear

::before

:before可在元素的内容前面插入新内容。默认地,这个伪元素是行内元素,可使用属性 display 改变这一点。

所有主流浏览器都支持 :before 伪元素。

::after

:after可以在元素的内容之后插入新内容。

用法和兼容性与:before类似。

CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。

伪类和伪元素的根本区别在于:它们是否创造了新的元素(抽象)。

伪类是在既有元素上添加类别(在逻辑上存在,但并不实际存在于文档树中),而伪类选择器则是添加新元素。

而这也是为什么,标准精确地使用 "create" 一词来解释伪元素,而使用 "classify" 一词来解释伪类的原因。

CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:

伪类用一个冒号表示 :first-child

伪元素则使用两个冒号表示 ::first-line

——(备注:摘抄自:http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/)

::selection

::selection可用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝背景白色字体。

::selection仅接受两个属性,分别是background和color。

兼容性:Webkit内核和IE9以上版本浏览器支持,Firefox需要加上私有属性“-moz-”。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/283