(atribut) - Trik CSS

Anonim

Terdapat banyak cara untuk memilih elemen dalam CSS. Pilihan yang paling asas adalah dengan nama tag, seperti p ( ). Hampir sesuatu yang lebih spesifik daripada pemilih tag menggunakan atribut - classdan IDkedua - duanya memilih atribut tersebut pada elemen HTML. Tetapi classdan IDbukan satu-satunya atribut yang boleh dipilih oleh pembangun. Kita boleh menggunakan atribut elemen sebagai pemilih.

Pemilihan atribut mempunyai sintaks khas. Inilah contohnya:

a(href="https://css-tricks.com") ( color: #E18728; )

Itu pemilih padanan tepat yang hanya akan memilih pautan dengan nilai hrefatribut yang tepat dari "https://css-tricks.com".

Tujuh Jenis Berbeza

Pemilih atribut peka huruf besar kecil secara lalai (lihat padanan tidak peka huruf kecil di bawah), dan ditulis di dalam tanda kurung ().

Terdapat tujuh jenis padanan yang dapat anda temukan dengan pemilih atribut, dan sintaksnya berbeza untuk masing-masing. Setiap pemilih atribut yang lebih kompleks dibina berdasarkan sintaksis pemilih padanan tepat - semuanya bermula dengan nama atribut dan diakhiri dengan tanda sama dengan diikuti dengan nilai atribut, biasanya dalam tanda kutip. Yang menjadi antara nama atribut dan tanda sama dengan apa yang membuat perbezaan di antara pemilih.

(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )

Nilai mengandungi: nilai atribut mengandungi istilah sebagai satu-satunya nilai, nilai dalam senarai nilai, atau sebagai sebahagian daripada nilai lain. Untuk menggunakan pemilih ini, tambahkan tanda bintang (*) sebelum tanda sama dengan. Sebagai contoh, img(alt*="art")akan memilih gambar dengan teks alt "seni abstrak" dan "atlet memulakan sukan baru", kerana nilai "seni" ada dalam kata "mulai".

Nilai terdapat dalam senarai yang dipisahkan ruang: nilai adalah satu-satunya nilai atribut, atau merupakan nilai keseluruhan dalam sekumpulan nilai yang dipisahkan ruang. Tidak seperti pemilih "mengandung", pemilih ini tidak akan mencari nilainya sebagai pecahan kata. Untuk menggunakan pemilih ini, tambahkan tilde (~) sebelum tanda sama dengan. Sebagai contoh, img(alt~="art")akan memilih gambar dengan teks alt "seni abstrak" dan "pertunjukan seni", tetapi bukan "atlet memulakan sukan baru" (yang akan dipilih oleh pemilih "berisi").

Nilai bermula dengan: nilai atribut bermula dengan istilah yang dipilih. Untuk menggunakan pemilih ini, tambahkan karet (^) sebelum tanda sama dengan. Jangan lupa, kepekaan kes penting. Sebagai contoh, img (alt = "art") akan memilih gambar dengan teks alt "pertunjukan seni" dan "corak artistik", tetapi bukan gambar dengan teks alt "Arthur Miller" kerana "Arthur" dimulai dengan huruf besar .

Nilai pertama dalam senarai pemisah tanda hubung: Pemilih ini sangat mirip dengan pemilih "bermula dengan". Di sini, pemilih memadankan nilai yang merupakan satu-satunya nilai atau yang pertama dalam senarai nilai yang dipisahkan tanda hubung. Untuk menggunakan pemilih ini, tambahkan watak paip (|) sebelum tanda sama dengan. Sebagai contoh, li(data-years|="1900")akan memilih item senarai dengan data-yearsnilai "1900-2000", tetapi bukan item senarai dengan data-yearsnilai "1800-1900".

Nilai diakhiri dengan: nilai atribut berakhir dengan istilah yang dipilih. Untuk menggunakan pemilih ini, tambahkan tanda dolar ($) sebelum tanda sama dengan. Contohnya, a(href$="pdf")memilih setiap pautan yang diakhiri dengan .pdf.

Catatan mengenai petikan: Anda boleh menggunakan tanpa tanda kutip di sekitar nilai dalam beberapa keadaan, tetapi peraturan untuk memilih tanpa tanda kutip adalah penyemak imbas silang yang tidak konsisten. Petikan selalu berfungsi, jadi jika anda tetap menggunakannya, anda pasti pemilih anda akan berfungsi.

Lihat Pemilih Atribut Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Fakta yang menyeronokkan: nilainya dianggap sebagai rentetan, jadi anda tidak perlu melakukan watak melarikan diri untuk membuatnya sesuai, seperti yang anda lakukan jika anda menggunakan watak yang tidak biasa dalam pemilih kelas atau ID.

(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )

Pemadanan tidak peka huruf besar-kecil

Pemilih atribut tidak sensitif huruf adalah sebahagian dari spesifikasi Pemilih Kumpulan Kerja CSS Tahap 4. Seperti yang disebutkan di atas, rentetan nilai atribut secara default peka huruf besar kecil, tetapi dapat diubah menjadi tidak peka huruf besar kecil dengan menambahkan isebelum braket penutup:

(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )

Pencocokan tidak peka huruf besar-kecil boleh sangat berguna untuk menyasarkan atribut yang memegang teks yang ditulis oleh manusia yang tidak dapat diramalkan. Sebagai contoh, andaikan anda menggayakan gelembung ucapan pada aplikasi sembang dan ingin menambahkan "melambaikan tangan" pada sebarang mesej dengan teks "hello" dalam beberapa bentuk. Anda boleh melakukannya hanya dengan CSS, dengan menggunakan alat pencocok huruf yang tidak sensitif untuk menangkap semua kemungkinan variasi:

Lihat pemadanan atribut CSS yang tidak peka Pen dengan CSS-Tricks (@ css-tricks) di CodePen.

Menggabungkan mereka

Anda boleh menggabungkan pemilih atribut dengan pemilih lain, seperti teg, kelas, atau ID.

div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )

Atau menggabungkan beberapa pemilih atribut. Imej ini contoh pilihan pelanggan dengan teks alt yang termasuk perkataan "orang" sebagai satu-satunya nilai atau nilai dalam ruang senarai dipisahkan, dan satu srcnilai yang merangkumi nilai "lorem":

img(alt~="person")(src*="lorem") ( /* style rules here */ )

Lihat Atribut Gabungan Pena dan Pemilihan Atribut-Atribut sahaja oleh CSS-Tricks (@ css-tricks) di CodePen.

Pemilih Atribut dalam JavaScript dan jQuery

Pemilih atribut boleh digunakan di jQuery seperti pemilih CSS yang lain. Dalam JavaScript, anda boleh menggunakan pemilih atribut dengan document.querySelector()dan document.querySelectorAll().

Lihat Pemilih Atribut Pen di JS dan jQuery oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • kelas
  • ID

Maklumat lanjut

  • Pemilih Atribut yang kurus
  • Pemilih atribut di MDN
  • Pemilih atribut dalam spesifikasi W3C CSS

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Sebarang Sebarang Sebarang Sebarang 7+ Sebarang Sebarang