HTML中常見(jiàn)偽類和偽元素有什么區(qū)別

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

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

w3c上對(duì)偽類和為元素的定義分別為:

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

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

span:hover //偽類

span::before //偽元素

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

常見(jiàn)的偽類（pseudo-classes）和偽元素（pseudo-elements）

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

偽元素的兼容性

Chrome 2+,

Firefox 3.5+ (3.0 had partial support),

Safari 1.3+,

Opera 9.2+,

IE8+ (with some minor bugs),

幾乎所有的移動(dòng)瀏覽器。

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

定義：

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

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

使用：

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

a:after { content: "↗"; }

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

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

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

示例：

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

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

示例：

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

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