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 Style API在样式表中提取CSS规则并查询选择器（尽管您可能需要使用逗号） - 分裂自己）。

如果它没有被浏览器解析但是通过其他机制提供输入，那么您可以使用JSCSSP（JavaScript中的CSS解析器）来解析输入。

Answer 2

以下是我最终解决的问题：

用一些独特的字符替换包括其内容的花括号。从这里Matching CSS Selectors with a Javascript RegExp
将列表拆分为这些唯一字符。

只是想在此处发布文档：

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

这就是你要找的东西吗？

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

3 个答案: