CSS で「i」フラグを使用すると、大文字と小文字を区別しない属性マッチングがどのように有効になりますか?

CSS 属性セレクターの「i」と大文字と小文字を区別しない属性のマッチング

CSS 属性セレクターのコンテキストで、疑問が生じました。コード内の文字「i」の重要性についてスニペット:

[type="checkbox" i]

回答:

属性値「チェックボックス」に追加された「i」は、大文字と小文字を区別しない属性の一致を示します。これは、CSS セレクター レベル 4 で導入された機能で、要素属性のより柔軟かつ包括的な一致を可能にします。

ブラウザ サポート:

この機能は現在サポートされていますで:

• Chrome 49
• Firefox 47
• Safari 9
• Opera 37 (および潜在的に以前のバージョン)

デモ:

ここにあります大文字と小文字を区別しない属性の動作を示すサンプルコードマッチング:

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

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

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

Green if supported, red if not:

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

ブラウザーが大文字と小文字を区別しない属性マッチングをサポートしている場合、サンプル要素の背景は緑色になります。それ以外の場合は、背景が赤になります。

以上がCSS で「i」フラグを使用すると、大文字と小文字を区別しない属性マッチングがどのように有効になりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。