占位符CSS调用问题(Placeholder CSS Calling Issue)

占位符CSS调用问题(Placeholder CSS Calling Issue)

通常我们使用这个想法（用逗号分隔的不同类） .Test，.test1 {} ，但是这里只有我们分别调用类才能正常工作。

为什么这个问题？ 在这里演示http://jsfiddle.net/6AR8n/

/* seperate classes */ #red input:-moz-placeholder{ color:red; } #red input::-webkit-input-placeholder{ color:red; } /* Classes with coma */ #green input:-moz-placeholder, input::-webkit-input-placeholder{ color:green; } <div id="red"> <input type="text" placeholder="Without Coma" > </div> <br> <div id="green"> <input type="text" placeholder="Coma" > </div>

Normally we use this idea (different classes separating with comma) .Test, .test1 {} , But here it will work fine only we call classes separately.

Why this issue ? Demo here http://jsfiddle.net/6AR8n/

/* seperate classes */ #red input:-moz-placeholder{ color:red; } #red input::-webkit-input-placeholder{ color:red; } /* Classes with coma */ #green input:-moz-placeholder, input::-webkit-input-placeholder{ color:green; } <div id="red"> <input type="text" placeholder="Without Coma" > </div> <br> <div id="green"> <input type="text" placeholder="Coma" > </div>

最满意答案

这是因为浏览器在遇到无法识别的选择器时应该删除整个规则。 从CSS2.1规范 ：

选择器总是与声明块一起使用。 当用户代理无法解析选择器（即，它不是有效的CSS 2.1）时，它必须忽略选择器和以下声明块（如果有的话）。

这包括前缀选择器，例如:-moz-placeholder和::-webkit-input-placeholder在你的例子中，因为浏览器不应该尝试解析它不支持的前缀; 对于某个解析器，外部前缀与任何其他语法错误一样无效。

另外，正如评论中所提到的， #green部分需要在逗号分隔组中的两个选择器上进行复制，如下所示：

#green input:-moz-placeholder, #green input::-webkit-input-placeholder{ color:green; }

但这与手头的问题完全无关。

This is because browsers are supposed to drop the entire rule when encountering unrecognized selectors. From the CSS2.1 spec:

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.

This includes prefixed selectors, like :-moz-placeholder and ::-webkit-input-placeholder in your example, because a browser isn't supposed to attempt to parse a prefix that it doesn't support; to a certain parser, foreign prefixes are just as invalid as any other syntax error.

Also, as mentioned in the comments the #green part needs to be replicated on both selectors in your comma-separated group, like so:

#green input:-moz-placeholder, #green input::-webkit-input-placeholder{ color:green; }

But this is completely irrelevant to the issue at hand.