什麼是CSS虛擬元素？CSS虛擬元素用法詳解

什麼是虛擬元素

虛擬元素表示了某個元素的子項目。這個子項目雖然在邏輯上存在，但卻並不實際存在於文檔樹中。

因為虛擬元素並不在文檔樹中，所以通過JS，也抓取不到虛擬元素，也不能給它綁事件。

文法

虛擬元素以::開頭。

在CSS1和CSS2中，虛擬元素和偽類一樣，都是用:開頭。但在CSS3中，虛擬元素以::開頭，用以和偽類進行區分。

IE8不支援::。因此如果要相容IE8，只能用:。

常見的虛擬元素

::before

在當前元素的內容的前面插入一個子項目。插入的元素為內嵌元素。

需要注意的是，使用::before時， 必須使用content來指定子項目的內容。
例如：

.element::before {    content: "Note: "; /* 字串 */}.element::before {    content: attr(title); /* 元素的title屬性 */}.element::before {    content: url(path/to/image.png); /* 一個圖片 */}.element::before {    content: "\201C"; /* Unicode轉義的一個字元 */}

更詳細的介紹見這裡

::after

在當前元素的內容的後面插入一個子項目。
其他和 ::before類似。

::first-line

選擇當前元素的第一行。
需要注意的是，其只作用於區塊層級元素[注1]。

對::first-line只能使用下面的樣式

• Font: font, font-style, font-variant, font-weight, font-size, line-height和font-family.Background: background, background-color, background-image, background-position, background-repeat, background-size和background-attachmenttext-decoration, text-transform, letter-spacing和word-spacing

因此，對::first-line使用margin和padding是無效的。

更詳細的介紹見這裡。

::first-letter

選擇第一個字母。
更詳細的介紹見這裡。

::selection

選中當前元素中，選中的文字。

selection.png

對::selection的只能使用 color, background-color和text-shadow這幾個屬性。

什麼時候用虛擬元素

HTML 標籤的目的，就是為了展示內容資訊。非內容資訊要使用虛擬元素。

具體的使用情境是表徵圖和清除浮動。

所謂的非內容資訊，指的是一些對內容進行修飾的資訊。

如，登入按鈕左邊的表徵圖是對登入的說明，為非內容資訊。

登入按鈕.png

如，用紅框框起來的小表徵圖表示，點擊左邊的連結，會在新視窗開啟。也是非內容資訊。

外鏈.png

demos

• 那些 CSS 偽元素可以幫你做的 10 個效果

• 基於單個 p 的 CSS 繪圖

注

1. 區塊層級元素指display的值為block, inline-block, table-cell, table-caption或 list-item中的一個的。

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程