4

通常、この考え方 (異なるクラスはコンマで区切る) .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>
4

1 に答える 1

6

これは、認識されないセレクターに遭遇すると、ブラウザーがルール全体をドロップすることになっているためです。CSS2.1仕様から：

セレクターは常に宣言ブロックと一緒に使用されます。ユーザーエージェントがセレクターを解析できない場合（つまり、CSS 2.1が無効な場合）、セレクターとそれに続く宣言ブロック（存在する場合）も無視する必要があります。

:-moz-placeholderこれには、例のようにプレフィックス付きセレクターが含まれます。これは::-webkit-input-placeholder、ブラウザーがサポートしていないプレフィックスを解析しようとすることを想定していないためです。特定のパーサーにとって、外部プレフィックスは他の構文エラーと同じように無効です。

また、コメントで述べたように、次のように#green、カンマ区切りのグループ内の両方のセレクターでパーツを複製する必要があります。

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

しかし、これは目前の問題とはまったく関係ありません。

于 2012-12-29T13:52:56.193 に答える