CSS之before, after虛擬元素特性表現兩則

一、特性表現one: 不能左右:empty偽類

CSS3選取器中有個:empty偽類，表示當元素裡面什麼都沒有的時候（包括空格、標籤內換行），應用相關樣式。在現代web網頁開發製作中，非常常用也非常方便。

例如，某元素類名是.box, 如下HTML和CSS:

<div class="box"></div>

.box { background-color: #cd0000; }.box:empty { background-color: #fae6e6; }

因為.box裡面是空大屁，所以，呈現的背景色就會是下面這樣子：

假如.box裡面有空格，或是文字，或是標籤之類：

<div class="box">我是文字</div>

則，:empty失效，於是，呈現的是靚麗的紅色：

下面，高能來了，請問，如果我們使用before或after虛擬元素在.box裡面產生內容，:empty偽類還有作用嗎？

這個問題動動腳趾頭想想都知道:empty偽類依然是起作用的………………才™怪呢！你的腳趾頭是長腦袋上的吧！這麼有學問的問題，咱就不要想當然YY了，寫個簡易Demo，實踐一下，自然出真知！

乖，請狠狠地點擊這裡：:empty偽類和before/after虛擬元素Demo

前面3個框框是讓你熟悉:empty偽類的，咱們目光直接落到第四個方塊，裡面的文字就是虛擬元素產生的：

.pseudo::after { content: "虛擬元素產生內容"; }

結果，所有現代瀏覽器下面，依然是娘炮紅背景色，截圖如下：

此表現說明，空元素內部使用虛擬元素產生的內容，是不被:empty偽類認可的，選取器依然認為這是個空元素。

其實呢，我們馬後炮一下，::before, ::after的名稱其實就出賣了自己，對吧，我們平常都在呢麼稱呼的？“虛擬元素”啊，其中大大的的“偽”字就表明跟一般的元素不一樣。

這不，這裡被:empty偽類給排擠了。

二、特性表現two: content動態呈現值無法擷取

對虛擬元素熟悉的同學應該都知道，content內容動態產生技術可以動態顯示各種內容，包括屬性值、計數器等，但是，你可能不知道的是，我們目前壓根沒有辦法獲得這些最終具體呈現的content內容，為什麼呢？因為我們是飛天小女警，我呸~不對，因為我們是虛擬元素。

首先，為避免歧義，我有必要解釋清楚，我們不是沒法獲得CSS中content的屬性值，而是沒法獲得頁面上content最終呈現的內容值。有啥區別呢，舉個例子大家應該就清楚了！

您可以狠狠地點擊這裡：CSS偽類計數器動態獲得選中元素個數Demo

上面這個Demo是去年“CSS計數器+偽類實現數值動態計算與呈現”一文中使用過的Demo，對，就是同一個。

使用純CSS動態顯示你當前選擇了幾項內容：

虛擬元素相關CSS如下：

.total::after {  content: counter(icecream);}

很簡單的CSS，虛擬元素，內容顯示的是icecream這個計數器當前的值？

高能再次來臨，如果讓你獲得.total這個元素目前呈現的數值數目(比方說上面截圖顯示的3)，你怎麼擷取？

告訴你，你妄圖想通過.total這個元素獲得這個動態數值3難於上青天！

以前介紹過window.getComputedStyle方法，可以獲得虛擬元素的計算樣式。但是，抱歉，得到的只是純粹的content在CSS檔案中的屬性值，例如這裡：

var dom = document.querySelector(".total"),window.getComputedStyle(dom , "::after").content;   // 結果是："counter(icecream)"

結果是”counter(icecream)”，而不是數值3。為啥子沒法擷取呢？我們繼續馬後炮一下，因為是“虛擬元素”，不是元素。哈哈，這個解釋好像有點敷衍，我特意去規範文檔看了一圈，沒找到很明確的解釋。不過網上有說法是因為before, after不屬於正常DOM樹節點，因此，就沒法得到動態呈現內容。