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

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'] 开头(注意用户可以使用 "或 ') 我已经能够找到/编辑与最后三个正确匹配的正则表达式，但我需要相反的东西，我想匹配不以 [data-module="xxx"] 开头的选择器...所以当我使用 PHP/Regex 检查，如果匹配，我将不得不告诉用户他没有遵守规则……正则表达式必须考虑到此 CSS 可能像示例中那样是无组织的，并且还可能存在媒体查询。 .

有魔法师能帮我解决这个问题吗？因为这很神奇……某种来源……搞不懂

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

但只有当选择器前面没有 [data-module="xxx"] 时才匹配

Answer 1

注意事项

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

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

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

• 全局:g
• 多行:m

---

回答

正则表达式

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

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

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

---

更新

正则表达式

^([\r\n]*)(@.*?{[\r\n]*)?((?!\[data-module=(['"])\d+\4\])[^@\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 ... 将不会被捕获。