占位符CSS调用问题 [英] Placeholder CSS Calling Issue

问题描述

通常我们使用这个想法(不同的类之间用逗号分隔) .Test，.test1 {} ，但是在这里，只有我们分别调用类时，它才能正常工作.

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

为什么这个问题? 在此处进行演示 http://jsfiddle.net/6AR8n/

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规范:

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

选择器始终与声明块一起使用.当用户代理无法解析选择器(即无效的CSS 2.1)时，它必须

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.

这包括带前缀的选择器，例如您的示例中的:-moz-placeholder和::-webkit-input-placeholder，因为浏览器不应该尝试解析它不支持的前缀.对于某个解析器，外来前缀与其他语法错误一样无效.

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.

此外，如注释中所述，#green部分需要在逗号分隔的组中的两个选择器上复制，如下所示:

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.

这篇关于占位符CSS调用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！