什么是CSS选择器的REGEX

Question

我想在一个CSS文件中添加一个CSS文件并在每个CSS选择器之前添加另一个选择器.

从:

p{margin:0 0 10px;}
.lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;}

我想要:

.mySelector p{margin:0 0 10px;}
.mySelector .lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;}

但是我的CSS文件非常复杂(事实上它是bootstrap css文件)所以正则表达式应该匹配所有的CSS选择器.

现在我有这个正则表达式:

([^\r\n,{};]+)(,|{)

你可以在http://regexr.com?328ps看到结果 但是你可以看到有很多不匹配的比赛

例如:

text-shadow:0 -1px 0 rgba(0,

匹配积极,但不应该

有人有解决方案吗？

谢谢

Answer 1

没有一个.CSS选择器不是" 常规语言 " 的示例,因此无法通过正则表达式进行解析.您需要根据CSS语法规范构建自己的解析器:http://www.w3.org/TR/css3-syntax/#detailed-grammar

CSS被描述为LL(1)语法,所以你可能最好使用像Yacc这样的工具来为你生成解析器.

Answer 2

所以我终于找到了符合我要求的REGEX

([^\r\n,{}]+)(,(?=[^}]*{)|\s*{)

关键是要添加一个积极的前瞻以避免不良匹配

(?=[^}]*{)

你可以在这里看到结果:http://regexr.com？328s7

我建议的唯一预防措施是删除每个块注释:

• 块评论的坏样本:http://regexr.com？328sd

Answer 3

所以最后我找到了一种更好的方法来做到这一点.

我使用LESS编辑器(例如:http://lesstester.com/)

并简单地嵌套我的整个css文件:.mySelector {your css here}