什么是偽元素

偽元素用于向某些選擇器設置特殊效果。

已存在元素是指DOM中存在的，偽元素則是虛擬的一種，樣式也是給這個虛擬的元素使用的。

比如偽元素 :before和:after，用于在css渲染中向元素的頭部或尾部插入內(nèi)容，它們不受文檔約束，也不影響文檔本身，只影響最終樣式。

這些添加的內(nèi)容不會出現(xiàn)在DOM中，僅僅是在css渲染層中加入。

它不存在于文檔中，所以js無法直接操作它。而jQuery的選擇器都是基于DOM元素的，因此也并不能直接操作偽元素。

哪些是偽元素

:first-letter：向文本的第一個字母添加特殊樣式?！?/section>
:first-line:　向文本的首行添加特殊樣式?！?/section>
:before：在元素之前添加內(nèi)容?！?/section>
:after：在元素之后添加內(nèi)容?！?/section>
::placeholder：匹配占位符的文本，只有元素設置了placeholder屬性時，該偽元素才能生效。（只支持雙冒號的形式）。
::selection：CSS偽元素應用于文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。（只支持雙冒號的形式）?！?/section>
::backdrop(處于試驗階段)：用于改變?nèi)聊Ｊ较碌谋尘邦伾聊Ｊ降哪J顏色為黑色。（只支持雙冒號的形式）。

更改偽元素的樣式

1、更換class來實現(xiàn)偽元素屬性值的更改：


// CSS代碼.red::before { content: "red"; color: red; }.green::before { content: "green"; color: green; }
// html代碼<div class="red">測試測試</div>
// jQuery代碼$(".red").removeClass('red').addClass('green');

2、使用CSSStyleSheet的insertRule來為偽元素修改樣式：


// html代碼<div class="red">測試測試</div>
//js代碼，支持IEdocument.styleSheets[0].addRule('.red::before','content: "red";color: red;');//支持非IE的現(xiàn)代瀏覽器document.styleSheets[0].insertRule('.red::before { content: "red";color: red; }', 0);

addRule說明：


document.styleSheets[0].addRule('.className'或‘#ID’ +‘::after’,css樣式字符串拼接).

3、在標簽中插入


// HTML代碼<div class="red">測試測試</div>
//js代碼var style = document.createElement("style");document.head.appendChild(style);sheet = style.sheet;//兼容IE瀏覽器sheet.addRule('.red::before','content: "red";color: red;'); //支持非IE的現(xiàn)代瀏覽器sheet.insertRule('.red::before { content: "red";color: red; }', 0);
// 亦可以使用 JQuery:$('<style>.red::before{content: "red";color:red;}</style>').appendTo('head');

修改偽元素的content的屬性值

使用CSSStyleSheet的insertRule來為偽元素修改樣式


var latestContent = "新修改的內(nèi)容";// 兼容IE瀏覽器document.styleSheets[0].addRule('.jadeId::before','content: "' + latestContent + '"');// 支持非IE的現(xiàn)代瀏覽器document.styleSheets[0].insertRule('.jadeId::before { content: "' + latestContent + '" }', 0);

注意

偽元素的 content 屬性很強大，可以寫入各種字符串和部分多媒體文件。但是偽元素的內(nèi)容只存在于CSS渲染樹中，并不存在于真實的DOM中。所以為了seo優(yōu)化，最好不要在偽元素中包含與文檔相關的內(nèi)容。
修改偽元素的樣式，建議使用通過更換class來修改樣式的方法。因為其他兩種通過插入行內(nèi)CSSStyleSheet的方式是在JavaScript中插入字符代碼，不利于樣式與控制分離；而且字符串拼接易出錯。
修改偽元素的content屬性的值，建議使用利用DOM的 data-* 屬性來更改。