CSS 最小化时损坏

Question

我有一个网站，我们正在使用一种工具来最小化和压缩 css 代码。它叫做 JCH，它是 Joomla 的一个插件，我想你也可以在 Drupal 上使用它。我有这个 css 代码的问题：

#sp-user3 .help-menu .nav.menu :not(.user-menu){
display: inline-flex;
}

正在转换为：

#sp-user3 .help-menu .nav.menu:not(.user-menu){display:inline-flex}

如您所见，“.nav.menu :not”被转换为“.nav.menu:not”，这导致 css 规则未按预期应用。

这可能是工具上的错误。我怎样才能重写它或添加一个字符来避免这种混淆？欢迎任何想法。

Answer 1

这绝对是一个工具问题，像 Minify 这样的网络压缩器生成正确的代码。

#sp-user3 .help-menu .nav.menu :not(.user-menu){display:inline-flex}

Answer 2

这确实是一个bug，我也不是第一次遇到了。

该站点上的 StackSnippet 编辑器曾经在其 Tidy 按钮中存在完全相同的错误。看我的bug report。很快就修好了。

因此您可以向 JCH 提交错误报告，然后等待它也被修复。

同时，您可以在 CSS 中的 : 之前插入一个 * 作为解决方法。
:not() 是 *:not() 的 shorthand，因此您不会更改选择器的含义，只需完整地写出所暗示的内容即可。

CSS gets broken when minimizing