Bolehkah CSS Menyasarkan Elemen HTML Berdasarkan Sebarang Nilai Atribut?

Menyasarkan Elemen HTML dengan Sebarang Nilai Atribut dalam CSS

Dalam CSS, adalah mungkin untuk menyasarkan elemen berdasarkan atribut tertentu, seperti yang digambarkan dalam contoh di bawah:

input[type=text] {
    font-family: Consolas;
}

Walau bagaimanapun, persoalan biasa timbul: bolehkah elemen disasarkan berdasarkan mana-mana nilai atribut? Artikel ini meneroka topik ini.

Menggunakan Pemilih Atribut

Untuk menyasarkan elemen dengan sebarang nilai atribut, pemilih atribut boleh digunakan. Dengan meninggalkan nilai selepas nama atribut, semua elemen dengan atribut itu dipilih. Contohnya:

a[rel] {
    color: red;
}

Dengan peraturan ini, coretan HTML yang disediakan akan menggayakan yang pertama dan ketiga; tag dalam warna merah:

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

Tingkah laku ini mencerminkan kursor lalai: gaya penunjuk digunakan pada teg dengan atribut href yang ditentukan.

Mengendalikan Nilai Atribut Kosong

Dalam kes tertentu, mungkin perlu membezakan antara nilai atribut kosong dan tidak kosong. Ini boleh dicapai menggunakan :not pseudo-class bersama-sama dengan pemilih atribut:

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

Peraturan ini menyasarkan semua teg anchor dengan atribut rel, tidak termasuk yang nilainya kosong (iaitu, tiada nilai dinyatakan).

Atas ialah kandungan terperinci Bolehkah CSS Menyasarkan Elemen HTML Berdasarkan Sebarang Nilai Atribut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!