Bolehkah Pemilih Atribut CSS Menyasarkan Atribut Data HTML5 Seperti `peranan-data`?

Pemilih Atribut CSS untuk Atribut Data HTML5

Soalan:

Bolehkah pemilih atribut CSS digunakan untuk menyasarkan elemen berdasarkan atribut data HTML5 mereka, seperti peranan data?

Jawapan:

Sudah tentu. Menggunakan pemilih atribut, anda boleh memilih elemen dengan mudah berdasarkan atribut datanya. Berikut ialah contoh:

[data-role="page"] {
    /* Styles */
}

Pemilih ini menyasarkan mana-mana elemen dengan peranan data atribut tersuai yang ditetapkan kepada nilai "halaman". Ambil perhatian bahawa nama atribut hendaklah disertakan dalam kurungan segi empat sama.

Jenis Pemilih Atribut:

Terdapat pelbagai jenis pemilih atribut yang boleh digunakan untuk senario yang berbeza:

• [name="value"]: Memadankan elemen yang nama atribut mempunyai nilai yang tepat "nilai".
• [nama]: Memadankan elemen yang nama atribut wujud tanpa mengira nilainya.
• [name~="value"]: Memadankan elemen yang nama atributnya mempunyai nilai yang mengandungi subrentetan "nilai".
• [name^="value"]: Memadankan elemen yang nama atributnya bermula dengan subrentetan "value".
• [name$="value"]: Memadankan elemen yang nama atributnya berakhir dengan subrentetan "value".

Sokongan Penyemak Imbas:

Kebanyakan penyemak imbas moden menyokong pemilih atribut, termasuk pemilih untuk atribut data tersuai. Walau bagaimanapun, perlu diingat bahawa pengesahan CSS tidak mempertimbangkan nama atribut bukan ruang nama, jadi pemilih ini tidak seharusnya menyebabkan isu pengesahan.

Atas ialah kandungan terperinci Bolehkah Pemilih Atribut CSS Menyasarkan Atribut Data HTML5 Seperti `peranan-data`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!