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

10年積累的網(wǎng)站制作、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有淮安免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

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

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

span:hover //偽類

span::before //偽元素

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

常見的偽類（pseudo-classes）和偽元素（pseudo-elements）

HTML中常見偽類和偽元素的區(qū)別

偽元素的兼容性

Chrome 2+,

Firefox 3.5+ (3.0 had partial support),

Safari 1.3+,

Opera 9.2+,

IE8+ (with some minor bugs),

幾乎所有的移動瀏覽器。

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

定義：

:before選擇器在被選元素的內(nèi)容前面插入內(nèi)容。

:after選擇器在被選元素的內(nèi)容后面插入內(nèi)容。

使用：

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

a:after { content: "↗"; }

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

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

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

示例：

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

counter() –調(diào)用計(jì)數(shù)器，可以不使用列表元素實(shí)現(xiàn)序號功能。

示例：

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

關(guān)于“HTML中常見偽類和偽元素有什么區(qū)別”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML中常見偽類和偽元素有什么區(qū)別”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。