css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。
偽類 用於當已有元素處於的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處於dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。
偽元素 譬如::before和::after偽元素，用於在CSS渲染中向元素的頭部或尾部插入內容，它們不受文檔約束，也不影響文檔本身，只影響最終樣式。這些添加的內容不會出現在DOM中，僅僅是在CSS渲染層中加入。它不存在於文檔中，所以JS無法直接操作它。而jQuery的選擇器都是基於DOM元素的，因此也並不能直接操作偽元素。那該怎樣操作偽元素的樣式呢？為此總結整理一篇，以備查用。
有哪些偽元素
:first-letter：向文本的第一個字母添加特殊樣式。
:first-line: 向文本的首行添加特殊樣式。
:before：在元素之前添加內容。
:after：在元素之后添加內容。
::placeholder：匹配占位符的文本，只有元素設置了placeholder屬性時，該偽元素才能生效。
::selection：CSS偽元素應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）
::backdrop(處於試驗階段)：用於改變全屏模式下的背景顏色，全屏模式的默認顏色為黑色。該偽元素只支持雙冒號的形式
獲取偽元素的屬性值
獲取偽元素的屬性值可以使用window.getComputedStyle()方法，獲取偽元素的CSS樣式聲明對象。然后利用getPropertyValue方法或直接使用鍵值訪問都可以獲取對應的屬性值。
語法： window.getComputedStyle(element[, pseudoElement])
參數：element（Object）：偽元素的所在的DOM元素；pseudoElement（String）：偽元素類型。可選值有：”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”；
譬如示例如下：
// CSS代碼 <style type="text/css"> #jadeId:before { content: "hello nicejade!"; display: block; width: 100px; height: 100px; background: red; } </style> // HTML代碼 <div id="jadeId"></div> // JS代碼 <script type="text/javascript"> var myIdElement = document.getElementById("jadeId"), beforeStyle = window.getComputedStyle(myIdElement, ":before"); console.log(beforeStyle); // [CSSStyleDeclaration Object] console.log(beforeStyle.width); // 100px console.log(beforeStyle.getPropertyValue("width")); // 100px console.log(beforeStyle.content); // "hello nicejade!" </script>
對於如上還可以補充的是：
1.getPropertyValue()和直接使用鍵值訪問，都可以訪問CSSStyleDeclaration Object。它們兩者的區別有：
對於float屬性，如果使用鍵值訪問，則不能直接使用getComputedStyle(element, null).float，而應該是cssFloat與styleFloat；
直接使用鍵值訪問，則屬性的鍵需要使用駝峰寫法，如：style.backgroundColor；
使用getPropertyValue()方法不可以駝峰書寫形式（不支持駝峰寫法），例如：style.getPropertyValue(“border-top-color”)；
getPropertyValue()方法在IE9+和其他現代瀏覽器中都支持；在IE6~8中，可以使用getAttribute()方法來代替；
2.偽元素默認是”display: inline”。如果沒有定義display屬性，即使在CSS中顯式設置了width的屬性值為固定的大小如”100px”，但是最后獲取的width值仍是”auto”。這是因為行內元素不能自定義設置寬高。解決辦法是給偽元素修改display屬性為”block”、”inline-block”或其他。
更改偽元素的樣式
方法1. 更換class來實現偽元素屬性值的更改：
// 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來為偽元素修改樣式：
document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的現代瀏覽器
方法3. 在<head>標簽中插入
var style = document.createElement("style"); document.head.appendChild(style); sheet = style.sheet; sheet.addRule('.red::before','color: green'); // 兼容IE瀏覽器 heet.insertRule('.red::before { color: green }', 0); // 支持非IE的現代瀏覽器 // 亦可以使用 JQuery: $('<style>.red::before{color:green}</style>').appendTo('head');
修改偽元素的content的屬性值
方法1. 使用CSSStyleSheet的insertRule來為偽元素修改樣式
var latestContent = "新修改的內容"; document.styleSheets[0].addRule('#jadeId::before','content: "' + latestContent + '"'); // 兼容IE瀏覽器 document.styleSheets[0].insertRule('#jadeId::before { content: "' + latestContent + '" }', 0); // 支持非IE的現代瀏覽器
方法2. 使用DOM元素的 data-* 屬性來更改content的值
// CSS代碼 .jadeId::before { content: attr(data-attr); color: red; } // HTML代碼 <div class="jadeId" data-attr="jadeId">nciejade.io</div> // JacaScript代碼 $('.jadeId').attr('data-attr', '新修改的內容');
辦公資源網址導航 https://www.wode007.com
其他小建議
偽元素的 content 屬性很強大，可以寫入各種字符串和部分多媒體文件。但是偽元素的內容只存在於CSS渲染樹中，並不存在於真實的DOM中。所以為了SEO優化，最好不要在偽元素中包含與文檔相關的內容。
修改偽元素的樣式，建議使用通過更換class來修改樣式的方法。因為其他兩種通過插入行內CSSStyleSheet的方式是在JavaScript中插入字符代碼，不利於樣式與控制分離；而且字符串拼接易出錯。
修改偽元素的content屬性的值，建議使用利用DOM的 data-\* 屬性來更改。