方法
描述
insertRule()
在当前样式表的 cssRules 对象插入CSS规则。
deleteRule()
在当前样式表删除 cssRules 对象的CSS规则。
有了StyleSheetList的全部内容，咱们来CSSStyleSheet本身。 在这里就有点意思了， CSSStyleSheet扩展了StyleSheet接口，并且只有这种只读属性，如.ownerNode，.href，.title或.type，它们大多直接从声明给定样式表的地方获取。回想一下加载外部CSS文件的标准HTML代码，咱们就会明白这句话是啥意思：
<head> <link type="text/css" href="https://www.jb51.net/style.css" title="Styles"> </head>
现在，咱们知道HTML文档可以包含多个样式表，所有这些样式表都可以包含不同的规则，甚至可以包含更多的样式表(当使用@import时)。CSSStyleSheet有两个方法:、.insertrule()和.deleterule() 来增加和删除 Css 规则。
// ... const ruleIndex = styleSheet.insertRule("div {background-color: red}"); styleSheet.deleteRule(ruleIndex);
.insertRule(rule,index):此函数可以在cssRules规则集合中插入一个指定的规则，参数rule是标示规则的字符串，参数index是值规则字符串插入的位置。
deleteRule(index):此函数可以删除指定索引的规规则，参数index规定规则的索引。
CSSStyleSheet也有自己的两个属性：.ownerRule和.cssRule。虽然.ownerRule与@import相关，但比较有趣的是.cssRules 。简单地说，它是CSSRuleList的CSSRule，可以使用前面提到的.insertrule()和.deleterule()方法修改它。请记住，有些浏览器可能会阻止咱们从不同的来源(域)访问外部CSSStyleSheet的.cssRules属性。
那么什么是 CSSRuleList？
CSSRuleList是一个数组对象包含着一个有序的CSSRule对象的集合。每一个CSSRule可以通过rules.item(index)的形式访问, 或者rules[index]。 这里的rules是一个实现了CSSRuleList接口的对象， index是一个基于0开始的，顺序与CSS样式表中的顺序是一致的。样式对象的个数是通过rules.length表达。
对于CSSStyleRule对象:
每一个样式表CSSStyleSheet对象可以包含若干CSSStyleRule对象，也就是css样式规则，如下:
<style type="text/css"> h1{color:red} div{color:green} </style>
在上面的代码中style标签是一个CSSStyleSheet样式表对象，这个样式表对象包含两个CSSStyleRule对象，也就是两个css样式规则。
CSSStyleRule对象具有下列属性:
1.type:返回0-6的数字，表示规则的类型，类型列表如下:
0：CSSRule.UNKNOWN_RULE。
1：CSSRule.STYLE_RULE （定义一个CSSStyleRule对象）。
2：CSSRule.CHARSET_RULE （定义一个CSSCharsetRule对象，用于设定当前样式表的字符集，默认与当前网页相同）。
3：CSSRule.IMPORT_RULE （定义一个CSSImportRule对象，就是用@import引入其他的样式表）
4：CSSRule.MEDIA_RULE （定义一个CSSMediaRule对象，用于设定此样式是用于显示器，打印机还是投影机等等）。
5：CSSRule.FONT_FACE_RULE （定义一个CSSFontFaceRule对象，CSS3的@font-face）。
6：CSSRule.PAGE_RULE （定义一个CSSPageRule对象）。
2.cssText:返回一个字符串，表示的是当前规则的内容，例如:
div{color:green}
3.parentStyleSheet:返回所在的CSSStyleRule对象。
4.parentRule:如果规则位于另一规则中，该属性引用另一个CSSRule对象。
5.selectorText:返回此规则的选择器，如上面的div就是选择器。
6.style:返回一个CSSStyleDeclaration对象。
// ... const ruleIndex = styleSheet.insertRule("div {background-color: red}"); const rule = styleSheet.cssRules.item(ruleIndex); rule.selectorText; // "div" rule.style.backgroundColor; // "red"
实现
现在，咱们对 CSS 相关的 JS Api有了足够的了解，可以创建咱们自己的、小型的、基于运行时的CSS-in-JS实现。咱们的想法是创建一个函数，它传递一个简单的样式配置对象，生成一个新创建的CSS类的哈希名称供以后使用。
实现流程很简单，咱们需要一个能够访问某种样式表的函数，并且只需使用.insertrule()方法和样式配置就可以运行了。先从样式表部分开始：