时间戳

首页 > 解决方案 > 多个@规则函数用逗号连接

css - 多个@规则函数用逗号连接

问题描述

我正在尝试为 Firefox 设置一些自定义规则，直到现在我使用了
@-moz-document url-prefix()
但是根据文档@-moz-document，未来版本将不支持。
反而@document会得到支持。

所以我改变了这个：

@-moz-document url-prefix() {
   ...
}

对此

@-moz-document url-prefix(),
@document url-prefix() {
   ...
}

但是现在由于某种原因，规则不再适用

标签： csssass

解决方案

这不起作用的原因是链接的 CSS 选择器/指令被评估为一个。如果其中一个部分未通过评估，则忽略整个样式

例子：

//  
[type="range"]::-moz-range-thumb, [type="range"]::-ms-thumb { ... }
                 makes IE skip             makes Firefox skip

// 
[type="range"]::-moz-range-thumb { ... }    makes IE skip (Firefox will work) 
[type="range"]::-ms-thumb { ... }           makes Mozilla skip (IE will work)

在您的情况下，当前的 Firefox 将理解 @-moz-document url-prefix() 但不理解 @document url-prefix() 导致它跳过样式。

因此，在处理特定于供应商的实现时，请始终保持您的样式分开。

我希望这是有道理的:-)

推荐阅读