7

それをサポートするブラウザーの入力プレースホルダーをスタイルするために、次のルールを記述しようとしました:

#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

問題は、ルールが適用されないことです。ただし、代わりに次のように分割すると、問題なく動作します。

#main input::-webkit-input-placeholder
{
    color: #888;
    font-style: italic;
}
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

ブラウザー固有のセレクターをグループ化できないのはなぜですか? またはそれを行う別の方法はありますか? 同じ要素に対して同じ属性を 2 回繰り返すのは適切ではありません。

アップデート：

実行できないと述べているこのリソースを見つけましたが、これまでのところ、その理由に関する情報はありません。セレクターの 1 つを認識しないという理由だけで、ブラウザーがルール全体を破棄しなければならないのは奇妙に思えます。

4

3 に答える 3

8

セレクターのグループ内の 1 つのセレクターが無効な場合、ブラウザーはルール全体を無効として処理する必要があります。または、少なくともW3C はそう言っています。

この動作が義務付けられている理由はわかりませんが、プッシュすると、無効なセレクターが一般的な CSS 構文を壊す可能性があり、ブラウザーが無効なセレクターが終了し、有効な要素が開始する場所を確実に推測できなくなるためだと思います。

于 2012-05-23T22:01:09.137 に答える
0

ほとんどの場合、一部のブラウザーは、セレクターが有効であると見なさないため、定義全体を破棄します。

于 2012-05-23T21:49:38.423 に答える
0

JavaScript を使用する場合は、-prefix-free スクリプトを確認してください。このような CSS プロパティのベンダー固有のプレフィックス (-webkit- や -moz- など) を省略することができます。

于 2012-05-23T22:12:37.023 に答える