Apakah yang dilakukan oleh pengubah suai \'i\' dalam pemilih atribut CSS?

Menyingkap Enigma "i" dalam Pemilih Atribut CSS

Dalam bidang CSS, huruf misterius "i" mempunyai muncul dalam pemilih atribut, menyebabkan ramai yang bingung. Untuk membongkar misterinya, mari kita mendalami tujuannya dan temui kepentingan yang dibawanya kepada penggayaan web.

Apakah 'i' dalam Pemilih Atribut CSS?

Pengubah suai "i" dalam pemilih atribut CSS menandakan padanan atribut tidak sensitif huruf besar-besaran. Ciri ini, yang diperkenalkan dalam Pemilih CSS Tahap 4, membolehkan fleksibiliti dalam memadankan atribut HTML tanpa mengira huruf besarnya.

Bagaimana Ia Berfungsi?

Pertimbangkan coretan kod berikut:

[type="checkbox" i]

Pemilih ini akan sepadan dengan semua input kotak pilihan elemen, tidak kira sama ada atribut 'jenis' mereka dalam huruf besar, huruf kecil atau gabungan kedua-duanya. Dalam erti kata lain, ia akan memadankan elemen dengan atribut 'type="Checkbox"', 'type="cHeCkBoX"' dan sebagainya.

Konteks Sejarah dan Ketersediaan

Padanan atribut tidak peka huruf besar-besaran pada mulanya diperkenalkan dalam gaya ejen pengguna Chrome tetapi kemudiannya boleh didayakan untuk kandungan web melalui bendera ciri eksperimen. Sejak itu ia telah mendapat sokongan meluas dalam penyemak imbas moden, termasuk Chrome 49 , Firefox 47 , Safari 9 dan Opera 37 *.

Contoh dan Ujian Penyemak Imbas

Kepada menunjukkan kefungsian, mari kita pertimbangkan pemilih yang menetapkan warna latar belakang hijau untuk elemen dengan atribut 'data-test="a"' atau 'data-test="A"'.

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

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

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

Jika kod ini digunakan pada HTML berikut:

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

Hasilnya elemen akan mempunyai latar belakang hijau jika padanan atribut tidak peka huruf besar-besaran disokong dalam penyemak imbas dan merah jika tidak.

Atas ialah kandungan terperinci Apakah yang dilakukan oleh pengubah suai \'i\' dalam pemilih atribut CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!