カンマ区切りセレクターを使用して CSS でベンダー固有の疑似要素とクラスを結合できないのはなぜですか?

ベンダー固有の疑似要素とクラスを組み合わせられない理由

複数の要素に同じスタイルを適用するためにカンマ区切りセレクターを使用するのは便利であるにもかかわらず、このアプローチはベンダー固有の疑似要素およびクラスには適用できません。この矛盾は、CSS2.1 で概説されている基本的なルールから生じます。

CSS2.1 仕様

CSS2.1 仕様では、ユーザー エージェントによって解析できないセレクターはすべて無視する必要があると規定されています。対応する宣言ブロックを使用します。これは、疑似クラスおよび疑似要素セレクター内の認識されないベンダー プレフィックスに適用されます。

ブラウザ解析

ブラウザごとに異なるプレフィックスが使用されるため、特定のユーザー エージェントは疑似要素および疑似クラスを解析できません。認識できない接頭辞が付いています。したがって、これらのブラウザでは、認識されないプレフィックスを含むルールを削除する必要があり、繰り返しの宣言が必要になります。

例

次のコード スニペットを考えてみましょう。これは、ベンダー固有のプレースホルダー テキストのスタイルを設定することを目的としています。 selectors:

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

カンマを使用してこれらのルールを結合しようとすると、 in:

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

ただし、次の理由により、この結合ルール セットは失敗します:

• Webkit を使用するブラウザ (Safari など) は、:-moz-* プレフィックスを解析できません。
• gecko を使用するブラウザ (Firefox など) は解析できません:-ms-
エッジを使用するブラウザ (Internet Explorer など) は、:-webkit-
• および :-moz- プレフィックスを解析できません。

結論

ブラウザの解析制限のため、そうではありませんベンダー固有の疑似要素とクラスを単一のカンマ区切りセレクターに結合することが可能です。これにより、異なるブラウザ間で要素をスタイル設定するときに繰り返し宣言する必要が生じます。

以上がカンマ区切りセレクターを使用して CSS でベンダー固有の疑似要素とクラスを結合できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。