问题描述：想写个小工具将当前页面用到了那些样式合并后导出，找了一下，没有满意的现成插件可用，于是决定自己动手写个小工具 （注：主要是 通过
<link rel="stylesheet" href="a.css" />
<style>.a {}</style>
引入的样式，这里不包括行内 style="" 定义的样式）
首先想到的是用 通过 styleSheets 来索引 用到的样式，因为之前写过一个动态插入样式的小工具 importCssString 查看 ，所以自然而然想到可以通过 document.styleSheets[0].cssRules 来遍历所有样式。
demo.html 文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<p class="a">.a</p>
</body>
</html>
a.css 文件代码如下：
.a {font-size: 23px;}
#b {font-size: 32px;}
本地起一个服务，将 a.com 映射到 127.0.0.1，访问 a.com/demo.html，在控制台运行以下代码能够成功输出当前页面引入的样式：
document.styleSheets[0].cssRules
>> CSSRuleList {0:....., length: 2;}
继续尝试将 a.css 改为从非当前域名，如 b.com/a.css，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="//b.com/a.css">
</head>
<body>
<p class="a">.a</p>
</body>
</html>
再次运行
document.styleSheets[0].cssRules
>> null
返回 null 猜测可能是跨域导致的，查阅资料 http://stackoverflow.com/questions/3211536/accessing-cross-domain-style-sheet-with-cssrules/6481457 进一步印证猜测属实，只能改 Access-Control-Allow-Origin，找到一款 Chrome 插件 https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj 可以方便修改 req 和 res
改了之后发现还是 是 null， 查了下，需要设置 crossorigin 属性， 继续修改代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" crossorigin href="//b.com/a.css">
</head>
<body>
<p class="a">.a</p>
</body>
</html>
再次运行：
document.styleSheets[0].cssRules
>> CSSRuleList {0:....., length: 2;}
成功！！！
输出当前页面所有用到的样式：
var list = [];[].forEach.call(document.styleSheets, function(item1){
[].forEach.call(item1.cssRules, function(item2){
if (item2.selectorText &&
(document.querySelector(item2.selectorText)
|| document.querySelector(String(item2.selectorText).replace(/(\:+after|\:+before)/ig, ''))))
list.push(item2.cssText)})});list;