为什么不能将特定于供应商的伪元素/类组合成一

问题描述

在 CSS 中，可以使用供应商特定的伪类和伪元素的组合来设置输入中的 placeholder 文本样式(以获得最佳的跨浏览器覆盖率).

In CSS it is possible to style placeholder text within an input using a combination of vendor-specific pseudo-classes and pseudo-elements (to get the best cross-browser coverage).

这些都共享相同的基本属性(即:文本样式和颜色声明).

These all share the same basic properties (ie: text styling and color declarations).

然而，尽管我不可避免地想要应用相同的样式，而与浏览器供应商无关，但似乎不可能将它们组合成一个以逗号分隔的选择器(就像在任何其他需要两个的 CSS选择器共享相同的样式).

However whilst I inevitably want to apply the same styles irrespective of browser vendor, it doesn't appear to be possible to combine these together into a comma-separated selector (as you would with any other piece of CSS where you want two selectors to share the same styles).

例如，我倾向于使用以下四个选择器来定位占位符样式:

As an example, I tend to target placeholder styling using the four following selectors:

• 输入:-moz-placeholder
• 输入::-moz-placeholder
• 输入:-ms-input-placeholder
• input::-webkit-input-placeholder

(虽然 :-moz-placeholder 已被弃用 取而代之的是 ::-moz-placeholder 这只发生在 FireFox 19 的发布中，因此目前两者都需要更好的浏览器支持).

(although :-moz-placeholder is being deprecated in favor of ::-moz-placeholder this only occurred with the release of FireFox 19 so at present both are needed for better browser-support).

令人沮丧的是，声明和赋予每个(相同的)样式会导致 CSS 中出现大量重复.

What's frustrating is that declaring and giving each (the same) style leads to a lot of repetition within the CSS.

所以，为了确保占位符文本是右对齐和斜体，我最终会得到:

So, to make sure that placeholder text is right-aligned and italic, I would end up with:

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;
}

我真正想做的是将它们组合成一个逗号分隔的规则集，如下所示:

What I really want to do is to combine them as one single comma-seperated rule set like this:

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

但是，尽管尝试了很多次，但这似乎从来没有奏效.这让我担心我不理解 CSS 的一些基本部分.

However, despite trying this on a fair few occasions, this never seems to work. It makes me concerned that there's some fundamental part of CSS that I'm not understanding.

谁能解释为什么会发生这种情况?

Can anybody shed any light on why this happens?

推荐答案

CSS2.1 状态:

选择器(另请参阅选择器部分)包含所有内容到(但不包括)第一个左花括号 ({).选择器总是与声明块一起使用.当用户代理无法解析选择器时(即，它不是有效的 CSS 2.1)，它必须 忽略选择器和下面的声明块(如果有的话).

The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

请注意，由于 CSS2.1 早于 CSS3，因此它不是有效的 CSS 2.1"是在假设用户代理完全符合 CSS2.1 并且理论上不存在 CSS3 的情况下编写的.在实践中，无论规范说它不是有效的 CSS"或类似的东西，它都应该被理解为用户代理不理解它".请参阅我对 这个相关的回答问题以获得更深入的解释.

Note that since CSS2.1 pre-dates CSS3, "it is not valid CSS 2.1" is written under the assumptions that a user agent is fully CSS2.1-compliant and that CSS3 does not exist in theory. In practice, wherever the spec says "it is not valid CSS" or something to that effect, it should be taken to mean "it is not understood by the user agent". See my answer to this related question for a more in-depth explanation.

也就是说，由于一个供应商的浏览器不理解其他供应商的前缀，它必须删除任何包含伪类和伪元素选择器中无法识别的前缀的规则.¹

Namely, since one vendor's browser doesn't understand other vendors' prefixes, it has to drop any rules that contain those unrecognized prefixes in pseudo-class and pseudo-element selectors.¹

有关为什么制定这样的规则的一些见解，请参阅 这个答案.

For some insight as to why such a rule was put in place, see this answer.

¹ _{请注意，WebKit 因部分违反此规则而臭名昭著:它可以轻松解析选择器具有无法识别的前缀伪元素的规则(在本例中为 ::-moz-占位符).也就是说，组合规则中的 :-moz-placeholder 伪类无论如何都会导致它中断.}

¹ _{Note that WebKit is notorious for partially flouting this rule: it has no trouble parsing rules whose selectors have unrecognized prefixed pseudo-elements (which in this case is ::-moz-placeholder). That said, the :-moz-placeholder pseudo-class in your combined rule will cause it to break anyway.}

这篇关于为什么不能将特定于供应商的伪元素/类组合成一个规则集?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！