如何将CSS选择器解析和提取为字符串？

Question

将CSS选择器提取为字符串的最简单方法是什么？

鉴于此作为输入：

#article{width:690px;overflow:hidden}
#article h2:first-child a{text-decoration:none}
#works .project p:last-child{margin-top:20px;font-size:13px}
#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}

我如何获得这样的选择器列表：

var selectors = ['#article','#article h2:first-child a','#works .project p:last-child','#works .project img']

Answer 1

定义“输入。如果是在浏览器已解析的样式表中，则可以使用DOM Level 2样式 API提取样式表中的CSS规则并查询选择器（尽管您可能需要用逗号分隔） 。

如果浏览器未解析它，但通过其他机制将其作为输入提供，则您可以使用JSCSSP （JavaScript中的CSS解析器）来解析输入。

Answer 2

这是我最终得到的解决方案：

1. 用一些独特的字符替换大括号，包括其内容。 正则表达式是从这里获取的，带有Java RegExp的CSS选择器匹配
2. 将列表拆分为那些唯一的字符。

只是想将其发布在此处进行记录：

var css = "#article[type=x]{width:690px;overflow:hidden}#article h2:first-child a{text-decoration:none}#works .project p:last-child{margin-top:20px;font-size:13px}#works .project img, #works .info img{width:680px;min-height:400px;border:1px dotted #ccc;margin-bottom:40px}"
var found = css.replace(/{([^}]*)}/gm,"~~~").split("~~~");

document.write(found);

Answer 3

警告：Waporcode，我没有测试过，但是我以前使用过类似的东西。

    document.styleSheets[0].cssRules[0].selectorText

那是您要找的东西吗？