提要：
最近在做一个功能的时候，需要用到js来改变伪元素的属性，结果发现伪元素和它的名字一样，并不属于元素，在DOM中无法找到，于是在网上找了一下相关的知识，做了个总结。
如果你着急看到用法：点击这里
1、CSSStyleSheet接口
首先说一下CSSStyleSheet接口：代表一个单一的CSS样式表，它从父代 StyleSheet 集成方法。
一个CSS样式表包含了一组CSS规则(CSS rules)。每条CSS规则可以通过与之相关联的的对象进行操作，这个关联对象实现了CSSStyleRule接口，而CSSStyleRule反过来实现了CSSRule。CSSStyleSheet允许你检测与修改和它相关联的的样式表(style sheet)，包括样式表的规则列表。
实际上，CSSStyleSheet也实现了更为通用的StyleSheet 接口。实现一个document的样式表的CSSStyleSheet列表可以过document.styleSheet属性获取(这个document通过外联样式表或内嵌的style元素定义样式)。
来自【MDN】
2、获取CSSStyleSheet列表
通过document.styleSheets来获取，得到的是一个数组列表。如图：
此处可以看到测试所用的网页，CSSStyleSheet列表长度为2，这里的个数，取决于当前页面引入的css文件（包含内部、外部、@import）。（不含内联）
3、CSSStyleSheet的属性及方法
StyleSheet.disabled
返回Boolean 表示当前样式表是否可用.
StyleSheet.href 只读
返回DOMString 表示样式表的位置.
StyleSheet.media 只读 只读
返回MediaList 表示样式的预期目标媒体
StyleSheet.ownerNode 只读 只读
返 Node 将此样式表与当前文档相关联。
StyleSheet.parentStyleSheet 只读
返回StyleSheet 如果有的话; 返回 null 如果没有.
StyleSheet.title 只读只读
返回DOMString 表示当前样式表的顾问标题。
StyleSheet.type 只读
返回DOMString 表示当前样式表的语言
4、常用方法及用法
deleteRule: 从样式表中删除一条规则
// 用法：document.styleSheets[1].deleteRule(index)
document.styleSheets[1].deleteRule(0)
removeRule: 从样式表中删除一条规则(和delete用法、作用一样，IE5-8可用，但IE5-8没有deleteRule方法)
// 用法：document.styleSheets[1].removeRule(index)；
document.styleSheets[1].removeRule(0)；
// 解决兼容问题
if (!CSSStyleSheet.prototype.deleteRule)
CSSStyleSheet.prototype.deleteRule = CSSStyleSheet.prototype.removeRule;
insertRule: 向样式表中插入一条新规则
// 用法：stylesheet.insertRule(rule [, index])
// rule 要插入的规则的DOMString
// 要插入的位置 默认0
document.styleSheets[0].insertRule("li { list-style: none;}", 2)
addRule: 向样式表中插入一条新规则（IE支持）
// 用法：document.styleSheets[1].addRule(ele, css, index);
// ele css选择器
// css css样式
// index 要添加的位置 默认0
document.styleSheets[0].addRule("li", "padding: 100px", 20);
5、设置伪元素
设置content属性
// 添加到最后，防止被覆盖。
var index = document.styleSheets[1].cssRules.length;
document.styleSheets[1].insertRule("div:after{content: '新的值';}", index);
另一种设置content的方法 （ attr() + data-* ）
// CSS代码
div::before {
content: attr(data-content);
}
// HTML代码
<div data-content="我是伪元素content">内容</div>
// JacaScript代码
$('div').attr('data-content', '我的conent被改了');
