css选择器正则,什么是CSS选择器的正则表达式(What is the REGEX of a CSS selecto

我想parce一个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文件是非常复杂的(实际上它是引导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:

所以，我终于发现，我的要求工作的正则表达式

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

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

(?=[^}]*{)

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

唯一的预防措施，我可以建议是取消每块注释：

坏样本与块注释： http://regexr.com?328sd

Answer 3:

所以最后我已经找到一种方法更好的方式来做到这一点。

我用一个不太编辑器(如： http://lesstester.com/ )

并简单地窝我的整个CSS文件：.mySelector {你在这里的CSS}

Answer 4:

这是真的，你不能使用正则表达式选择CSS 选择器 ，但你可以使用正则表达式选择CSS 规则 ，所以你可以在倒数方式来完成工作：

为了格式的CSS文件不具有在同一行选择器和规则。 你的代码应该是这样的：p {

余量：0 0 10px的;

}

。铅{

边距：20像素;

字体大小：21px;

字体重量：200;

行高：30像素;

}

选择所有规则(正则表达式：(^()*)。p {

余量：0 0 10px的;

}

。铅{

边距：20像素; 字体大小：21px; 字体重量：200; 行高：30像素;

}

添加一些前缀规则(例如####)p {

####余量：0 0 10px的;

}

。铅{

####边距：20像素; ####字体大小：21px; ####字体重量：200; ####行高：30像素;

}

选择所有行不与####开始，而不是返回到线，而不是一个}(正则表达式：^ [^ #### \ N}])p {

####余量：0 0 10px的;

}

。铅{

####边距：20像素;

####字体大小：21px;

####字体重量：200;

####行高：30像素;

}

加你的CSS前缀.my_class_prefix p {

####余量：0 0 10px的;

}

.my_class_prefix .lead {

####边距：20像素;

####字体大小：21px;

####字体重量：200;

####行高：30像素;

}

删除添加前缀####.my_class_prefix p {

余量：0 0 10px的;

}

.my_class_prefix .lead {

边距：20像素;

字体大小：21px;

字体重量：200;

行高：30像素;

}

Answer 5:

一个简单的和可读的正则表达式是如下：

[\#\.\w\-\,\s\n\r\t:]+(?=\s*\{)

你可以在这个测试它的CSS代码工具 `

Answer 6:

下面是我用一个类似的问题的解决方案。 我想删除与发表的所有CSS规则@ 。 为此，我用下面的正则表达式：

@\s*.*\s*\{((?!\n\})[\s\S])+\n\}

它使该规则在新的一行结束的假设。 这样，它可以排序的处理嵌套CSS规则。

Answer 7:

面临着类似的问题，用以下只提取CSS选择器和指令不评论和媒体查询：

/^(?!.*@media)[\t ]*([a-zA-Z#.:*\[][^{\/]*\s*){[\s\S]*?}/

例如： https://regex101.com/r/JmjthP/5

我敢肯定，这是缺少一些边缘情况，但似乎是为我工作。

看到这个问题： Ruby的正则表达式-匹配所有的CSS选择器和指令

Answer 8:

虽然它不是可以编写任何有效的CSS选择器匹配一个正则表达式，你可以结合一对夫妇正则表达式和有点逻辑来实现你的目标。

下面以节点的fs模块读取CSS，但你可以得到，但是你想的原始CSS串。

const fs = require('fs'),

myClassName = 'mySelector',

mySelector = '.' + myClassName,

mySelectorRegex = new RegExp(`\\.${myClassName}([ .#[:(]|$)`),

cssSelectorRegex = /[@.#a-zA-Z][^}]*?(?={)/g;

let css = fs.readFileSync('path/to/file.css').toString();

css = css.replace(cssSelectorRegex, match => {

// Match is a string of selectors like '.foo' or '.foo, #bar'

// We need to split it on the comma and handle each selector individually

return match.split(',').map(selector => {

selector = selector.trim();

// Don't alter media queries, imports, or selectors that already contain '.mySelector'

if (selector.startsWith('@') || selector.match(mySelectorRegex)) {

return selector;

}

// Prepend '.mySelector ' to the selector

return mySelector + ' ' + selector;

// Combine the list of selectors back together

}).join(',');

});

文章来源: What is the REGEX of a CSS selector