匹配 CSS 个不以 selector 开头的选择器

Question

如果我有一个 css 文件，像这样（例如）：

div {
  color: red;
}
a{color: red}.someClass {color: red}

.someOtherClass {
color: red;
}

@media (max-width: 767px){
 div { color: green; }
 [data-module="123"] .someOtherClass { color: green; }
}

[data-module='123'] .someRandomClass { color: red }
[data-module='123'] .someOtherRandomClass {
color: red;
}

只有后三个符合 CSS 在我们公司的正确用法：

[data-module='123'] .someOtherClass {
[data-module="123"] .someRandomClass {
[data-module='123'] .someOtherRandomClass {

因为它们以 [data-module='xxx'] 开头（注意用户可以使用 " 或 '）我已经能够 find/edit 一个与最后三个正确匹配的正则表达式，但我需要相反的东西，我想匹配不以 [data-module="xxx"] 开头的选择器...所以当我用 PHP/Regex 检查时，如果它匹配，我将不得不告诉用户他没有遵守规则......正则表达式必须考虑这个 CSS 可能像在这个例子，也可能有媒体查询..

哪位大侠能帮我解决这个问题吗？因为这很神奇……某种来源……搞不懂

编辑：我想要这样的正则表达式： http://regexr.com/328s7

但只匹配，如果选择器前面没有 [data-module="xxx"]

Answer 1

备注

附加信息（在问题下方的评论中）使我能够正确创建适合您情况的正则表达式。

请注意，遵循真正的 CSS 选择器规则以及 declaration/declaration list/declaration 块规则可以使此答案更好，但是，考虑 CSS 选择器这个问题的语法重要性，我决定忽略它并接受所有字符（换行符和大括号除外）。此正则表达式不适用于选择器之前有大括号的任何行（因此请确保您已经美化您的 CSS 之前使用某种自动格式化工具如果您倾向于编写草率的代码）。

请注意，下面的正则表达式需要以下两个修饰符：

全球：g
多行：m

回答

正则表达式

^([\r\n]*)((?!\[data-module=(['"])\d+\])[^\r\n{}])+({[\s\S]*?})$

稍微解释一下这个正则表达式的作用：

断言行首的位置
匹配零次和无限次回车 return \r 或换行符 \n 个字符
匹配一次和无限次，但次数越少越好，不出现在分组中（\r\n{}）且不包含[data-module=结构的字符，后接单引号 ' 或双引号 " 字符，后跟一个到无限的数字，然后是先前匹配的相同字符（单引号或双引号 - 确保它被正确关闭），最后是右方括号 ]
通过检查左大括号 { 后跟零到无限次之间的任何字符（包括换行符）来匹配 CSS 声明块，但尽可能少，后跟通过右大括号 }
在行尾断言位置（这里不是真的需要，但我喜欢与第一步的一致性）

更新

正则表达式

^([\r\n]*)(@.*?{[\r\n]*)?((?!\[data-module=(['"])\d+\])[^@\r\n{}])+({[\s\S]*?})([\r\n]*})?$

这个也会抓规则。但是请注意，它不会捕获初始规则。

例如，如果您有以下代码：

@media (max-width: 767px){
   [data-module="123"] .someOtherClass { color: green; }
   .someOtherClass { color: green; }
   [data-module="123"] .someOtherClass { color: green; }
   .someOtherClass { color: green; }
}

在上面的例子中，只有第三、五、六行会被捕获。第一行@media ...不会被捕获。

匹配 CSS 个不以 selector 开头的选择器

Match CSS selector that doesn't start with selector

css

regex

regex-negation

备注

回答

正则表达式

更新

正则表达式