HTML中常見偽類和偽元素有什么區別

這篇文章主要介紹了HTML中常見偽類和偽元素有什么區別的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML中常見偽類和偽元素有什么區別文章都會有所收獲，下面我們一起來看看吧。

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

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

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

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

span:hover //偽類

span::before //偽元素

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

常見的偽類（pseudo-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() – 用于引用媒體文件。

示例：

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

counter() – 調用計數器，可以不使用列表元素實現序號功能。

示例：

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

關于“HTML中常見偽類和偽元素有什么區別”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML中常見偽類和偽元素有什么區別”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。