CSS 属性セレクターでの「i」修飾子は何をしますか?

<h2>CSS 属性セレクターの「i」の謎を明らかにする</h2>

CSS の領域では、謎の文字「i」が属性セレクター内に登場し、多くの人を当惑させました。その謎を解明するために、その目的を詳しく調べ、それが Web スタイルにもたらす重要性を発見しましょう。

<h3>CSS 属性セレクターの 'i' とは何ですか?</h3>

CSS 属性セレクターの「i」修飾子は、大文字と小文字を区別しない属性一致を示します。 CSS セレクター レベル 4 で導入されたこの機能により、大文字小文字に関係なく HTML 属性を柔軟に照合できるようになります。

<h3>仕組みは?</h3>

次のコード スニペット:

[type="checkbox" i]

このセレクターは、関係なく、すべてのチェックボックス入力要素と一致します。 「type」属性が大文字、小文字、または両方の混合であるかどうか。つまり、属性「type="Checkbox"」、「type="cHeCkBoX"」などを持つ要素と一致します。

<h3>歴史的コンテキストと可用性</h3>

大文字と小文字を区別しない属性マッチングは、当初 Chrome のユーザー エージェント スタイルに導入されましたが、後にウェブでも有効になる可能性があります実験的な機能フラグによるコンテンツ。それ以来、Chrome 49 、Firefox 47 、Safari 9 、Opera 37 * を含む最新のブラウザで広くサポートされるようになりました。

<h3>例とブラウザ テスト</h3>

へ機能を示します。属性を持つ要素に緑色の背景色を設定するセレクターを考えてみましょう。 'data-test="a"' または 'data-test="A"'。

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

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

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

このコードを次の HTML に適用すると:

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

結果大文字と小文字を区別しない属性一致がブラウザでサポートされている場合、要素の背景は緑色になり、そうでない場合は赤色になります。

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