Bagaimanakah Saya Boleh Menyasarkan Elemen CSS dengan Sebarang Nilai Atribut?

Menyasarkan Elemen dengan Nilai Beratribut dalam CSS

CSS membolehkan pembangun memilih elemen tertentu berdasarkan atribut. Walaupun menyasarkan elemen dengan nilai atribut yang dipratentukan adalah mudah, melanjutkan ini kepada mana-mana nilai atribut boleh terbukti mencabar.

Pernyataan Masalah

Bolehkah kita memilih elemen dengan sebarang nilai atribut, serupa dengan:

a[rel=*]
{
    color: red;
}

Pemilih ini harus sepadan dengan yang berikut HTML:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Penyelesaian

Untuk menyasarkan sebarang nilai atribut yang tidak kosong, gunakan pemilih berikut:

a[rel]
{
    color: red;
}

Pemilih ini akan padankan semua tag anchor dengan atribut 'rel'.

Mengendalikan Kosong Nilai

Walau bagaimanapun, jika keperluan adalah untuk membezakan antara nilai atribut kosong dan tidak kosong, perkenalkan kelas pseudo CSS ':not':

a[rel]:not([rel=""])
{
    color: red;
}

Pemilih ini akan pilih tag sauh dengan atribut 'rel' yang tidak kosong.

Tambahan Nota

Secara lalai, teg sauh HTML dengan atribut 'href' mempunyai gaya 'kursor: penunjuk' digunakan. Ciri ini menyerlahkan kemungkinan memilih elemen berdasarkan kehadiran sebarang nilai atribut.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyasarkan Elemen CSS dengan Sebarang Nilai Atribut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!