css - 为什么我不能在 LESS 中做多个占位符选择器

Question

这个问题在这里已经有了答案:





Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

(2 个回答)


8年前关闭。




只想添加css 前缀 像::-moz-placeholder和 ::-webkit-input-placeholder
所以我会在 LESS 中做多重选择器:

::-moz-placeholder, ::-webkit-input-placeholder {
 color:red;
}

它不工作？为什么？

演示: http://jsfiddle.net/pfg3Q/

但是当我通常喜欢它时它的工作:

::-moz-placeholder {
 color:red;
}
::-webkit-input-placeholder {
 color:red;
}

演示: http://jsfiddle.net/pfg3Q/1/

我做错了什么？想知道这是否与LESS有关吗？

引用:前缀来自 http://davidwalsh.name/html5-placeholder-css

Answer 1

有人在 SO 上发现了相关问题:
Should I use single or double colon notation for pseudo-element css

基本上，如果您的浏览器无法识别逗号分隔列表中的任何选择器，它会跳过整个规则并继续下一条。

// Chrome
::-moz-placeholder // <-- I don't know this one, skipping!

// Firefox
::-moz-placeholder, ::webkit-input-placeholder // <-- I don't know this one, skipping!

但是，如果您将它们分隔在单个语句中，它不会跳过它知道的那个。

因此，根据经验:如果您有供应商前缀，请始终将它们拆分为单独的规则。