为什么这些 CSS 花括号不匹配？答案

【问题标题】：Why are these CSS curly braces not matching?为什么这些 CSS 花括号不匹配？
【发布时间】：2018-03-01 00:02:34
【问题描述】：

我正在调试一大段 CSS 代码。我已将问题缩小到几行。我一直盯着那些线太久了，没有发现任何问题：

@-moz-document url(chrome://browser/content/browser.xul) {

#anyidentifier:not(.off) .anything {
  background-color: #222 !important; }
#anyidentifier:not(.on) .anything {
  background-color: #333 !important; }

}

根据 Notepad++ 以及 Firefox 处理 CSS 的方式，第一个左大括号与第一个右大括号匹配。它应该与最后一个大括号匹配。

我没看到什么？

或者这是 Notepad++ 中的错误，也可能是 Mozilla 的 Firefox 中的错误？

【问题讨论】：

标签： css firefox syntax notepad++

【解决方案1】：

Notepad++ 只识别某些已知的 at 规则，并认为无法识别的 at 规则是无效的 CSS，就像浏览器一样。不过，尚不清楚这是否应被视为 Scintilla 组件中语法突出显示的错误。

这不会是 Firefox 的问题，因为 Notepad++ 与浏览器无关。 @-moz-document 是特定于 Firefox 的规则，并且...仅此而已。

（是的，有一个@document at-rule 已经被踢到了第 4 级，但是无论它属于哪个规范都不会改变前缀 at 规则是非标准的事实；你会看到同样的问题例如@-moz-keyframes 和所有其他前缀。）

【讨论】：

奇怪的事情......不可否认，我需要休息一下......是Firefox没有正确呈现它......它在解析代码时就像Notepad ++一样。当然，实际代码更长更复杂，但我一直在努力缩小问题范围。
@RockPaperLizard：这个 CSS 规则在哪里？由于您要在 chrome 中定位某些内容，因此它必须在 userChrome.css 中才能工作，而不是 userContent.css 或作者样式表。
是的，它在 userChrome.css 中
@RockPaperLizard：似乎对我自己有用。也许@-moz-document 之前有一些垃圾字符或其他东西。某些顶级规则完全不起作用的常见原因。打开显示所有字符（工具栏上的¶）或切换到十六进制模式查看。