CSS 属性セレクターにおける「i」修飾子は何を意味しますか?

CSS 属性セレクター "i" について

Google Chrome ユーザー エージェントの CSS スタイルシートを調べると、次のようなセレクターが表示されることがあります。以下:

[type="checkbox" i]

この謎めいた「i」記号は質問を促します:それはどのような重要性を持っていますか?

答え:

「i」は、セレクターが大文字と小文字を区別しない属性マッチングを使用する必要があるかどうかを示す省略された属性です。 CSS セレクター レベル 4 で導入されたこの機能は、Chrome、Firefox、Safari などの主要なブラウザに実装されています。

「i」修飾子により、特定の属性値を持つ要素を検索するときに、ブラウザは大文字と小文字の両方の値を考慮します。これは、属性値の大文字と小文字が一貫していない場合、または標準化されていない場合に特に役立ちます。

実際の例:

次の CSS スニペットを考えてみましょう:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

次の内容を含む HTML ドキュメントに適用される場合element:

<div data-test="A"></div>

ブラウザが大文字と小文字を区別しない属性マッチングをサポートしている場合、div は緑色で表示され、「a」属性値 (小文字) が「A」属性値と同等であるとみなされることを示します。セレクターで使用されます。それ以外の場合、div は赤で表示されます。

この機能により、CSS セレクターの柔軟性と堅牢性が強化され、属性の大文字と小文字の一貫性がないために破壊的な変更が発生する可能性が減ります。

以上がCSS 属性セレクターにおける「i」修飾子は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。