为什么我无法使用逗号分隔选择器组合 CSS 中特定于供应商的伪元素和类？

为什么供应商特定的伪元素和类不能组合

尽管使用逗号分隔的选择器将相同的样式应用于多个元素很方便，但这种方法不能应用于特定于供应商的伪元素和类。这种不一致是由 CSS2.1 中概述的基本规则引起的。

CSS2.1 规范

CSS2.1 规范规定，任何无法被用户代理解析的选择器都必须被忽略及其相应的声明块。这适用于伪类和伪元素选择器中无法识别的供应商前缀。

浏览器解析

由于不同的浏览器使用不同的前缀，某些用户代理将无法解析伪元素和类带有无法识别的前缀。因此，这些浏览器必须删除包含这些无法识别的前缀的任何规则，从而导致需要重复声明。

示例

考虑以下代码片段，其目的是使用特定于供应商的占位符文本样式选择器：

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

尝试使用逗号组合这些规则将导致在：

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

但是，这个组合规则集将失败，因为：

• 使用 webkit 的浏览器（例如 Safari）无法解析 :-moz-* 前缀。
• 使用 gecko 的浏览器（例如 Firefox）无法解析 :-ms- 和:-webkit- 前缀。
• 使用 Edge 的浏览器（例如 Internet Explorer）无法解析 :-webkit- 和 :-moz- 前缀。

结论

由于浏览器解析限制，无法结合特定于供应商的伪元素和类放入单个逗号分隔的选择器中。这导致在不同浏览器中设置元素样式时需要重复声明。

以上是为什么我无法使用逗号分隔选择器组合 CSS 中特定于供应商的伪元素和类？的详细内容。更多信息请关注PHP中文网其他相关文章！