为什么我们不能将特定于供应商的占位符选择器组合到单个 CSS 规则中？

揭开组合特定于供应商的选择器的谜团

在 CSS 领域内，遇到了跨多个浏览器设置占位符文本样式的难题。为了实现最佳的跨浏览器支持，采用了供应商特定的伪类和伪元素的组合。然而，存在一个令人困惑的困境：为什么不能像其他 CSS 场景中的惯例那样将这些规则合并到一个规则集中？

深入研究 CSS2.1 规范可以揭开答案。它要求将选择器定义为第一个左大括号 ({) 之前的所有内容。当用户代理遇到无法破译的选择器时，它必须忽略选择器和随后的声明块。

这意味着具有某些前缀的浏览器可能无法理解具有其他供应商特定前缀的选择器，导致排除选择器中提及这些无法识别的前缀的规则。因此，尝试将这些规则组合成一个以逗号分隔的规则集，如下所示：

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

将被证明是徒劳的。用户代理只会将样式应用于识别的选择器，从而导致跨浏览器的样式不一致。

这个复杂的规则是有目的的。它确保浏览器遵守公认的 CSS 语法，并且只实现它们完全理解的规则。通过强制执行此操作，可以避免由于供应商特定偏差而导致的任何潜在不一致或渲染错误。

以上是为什么我们不能将特定于供应商的占位符选择器组合到单个 CSS 规则中？的详细内容。更多信息请关注PHP中文网其他相关文章！