提到偽類，在人們的印象中最常用的不過是:hover、:active、:link、:visited，還有css3里的常用偽類選擇器:last-child、:first-child、nth-child(n)等等!

w3c上對偽類和為元素的定義分別為:

偽類：偽類用于向某些選擇器添加特殊的效果。偽元素：偽元素用于將特殊的效果添加到某些選擇器

css3為了明確偽類和偽元素的區別，已經明確了單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素

span:hover //偽類

span::before //偽元素

但是，為了保證兼容性，現在偽元素普遍還是使用單引號。下面我將用單引號的形式給大家做介紹

常見的偽類（pseudo-html' target='_blank'>classes）和偽元素（pseudo-elements）

HTML中常見偽類和偽元素的區別

偽元素的兼容性

Chrome 2+,

Firefox 3.5+ (3.0 had partial support),

Safari 1.3+,

Opera 9.2+,

IE8+ (with some minor bugs),

幾乎所有的移動瀏覽器。

偽元素:before和:after的定義和基本用法

定義：

:before 選擇器在被選元素的內容前面插入內容。

:after 選擇器在被選元素的內容后面插入內容。

使用：

使用 content 屬性來指定要插入的內容。　　content有幾個比較有用的值：[String] – 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：

a:after { content: "↗"; }

attr() – 調用當前元素的屬性，可以方便的比如將圖片的 Alt 提示文字或者鏈接的 Href 地址顯示出來。示例：

a:after { content:"(" attr(href) ")"; }

url() / uri() – 用于引用媒體文件。示例：

h1::before { content: url(logo.png); }

counter() – 調用計數器，可以不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：

h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。