Saya telah menemukan pemilih CSS berikut di lembar gaya agen pengguna Google Chrome:

[type="checkbox" i]

Apa imaksudnya

Seperti yang disebutkan dalam komentar, ini untuk pencocokan atribut tidak peka huruf besar / kecil. Ini adalah fitur baru di CSS Selectors Level 4.

Saat ini tersedia di Chrome 49+, Firefox 47+, Safari 9+, dan Opera 37 + *. Sebelumnya, fitur ini hanya tersedia dalam gaya agen pengguna Chrome mulai sekitar Chrome 39, tetapi dapat diaktifkan untuk konten web dengan menyetel tanda fitur eksperimental.

* Opera versi sebelumnya mungkin juga mendukungnya.

Contoh Kerja / Pengujian Browser:

[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>

Kotak di atas akan berwarna hijau jika browser mendukung fitur ini, merah jika tidak.

Itu adalah tanda case-insensitive untuk atribut selector, yang diperkenalkan di Selectors 4 . Tampaknya mereka menyelinap penerapan fitur ini ke Chrome pada awal Agustus 2014.

Singkatnya: tanda ini memberi tahu browser untuk mencocokkan nilai masing-masing untuk typeatribut secara case-insensitively. Perilaku pencocokan pemilih default untuk nilai atribut di HTML peka huruf besar / kecil , yang sering kali tidak diinginkan karena banyak atribut yang ditetapkan memiliki nilai tidak peka huruf besar / kecil, dan Anda ingin memastikan pemilih Anda mengambil semua elemen yang tepat apa pun hurufnya. typeadalah salah satu contoh dari atribut semacam itu, karena ini adalah atribut yang disebutkan , dan atribut yang disebutkan dikatakan memiliki nilai case-insensitive .

Berikut adalah komitmen yang relevan:

• 179370 - implementasi
• 179401 - perubahan pada stylesheet UA seperti yang ditunjukkan pada tangkapan layar di pertanyaan

Perhatikan bahwa itu saat ini tersembunyi dalam tanda "Aktifkan fitur Platform Web eksperimental", yang dapat Anda akses di chrome: // flags / # enable-eksperimental-web-platform-features. Ini mungkin menjelaskan mengapa fitur tersebut sebagian besar tidak diperhatikan - fitur yang tersembunyi di balik tanda tersebut hanya dapat digunakan secara internal dan tidak dalam kode yang dapat dilihat publik (seperti stylesheet penulis) kecuali jika diaktifkan, karena bersifat eksperimental dan oleh karena itu tidak siap untuk penggunaan produksi.

Berikut adalah kasus uji yang dapat Anda gunakan - bandingkan hasil saat flag diaktifkan dan dinonaktifkan:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

Perhatikan bahwa saya menggunakan atribut data khusus dan bukan typeuntuk menunjukkan bahwa atribut itu dapat digunakan dengan atribut apa saja.

Saya tidak mengetahui penerapan lain apa pun saat tulisan ini dibuat, tetapi mudah-mudahan browser lain segera menyusul. Ini adalah tambahan yang relatif sederhana tetapi sangat berguna untuk standar dan saya berharap dapat menggunakannya di masa mendatang.