Bolehkah CSS Sasaran Elemen dengan Sebarang Nilai Atribut?

Penyasaran Nilai Atribut CSS Dipermudahkan

Dalam bidang penggayaan halaman web, atribut CSS memainkan peranan penting dalam menentukan penampilan dan gelagat elemen HTML. Walaupun kita sering menghadapi situasi di mana kita perlu menyasarkan elemen dengan nilai atribut tertentu, bagaimana jika kita perlu menggunakan gaya pada elemen dengan mana-mana set atribut, tanpa mengira nilainya?

Bolehkah CSS menyasarkan elemen dengan atribut daripada sebarang nilai?

Mari kita selami soalan, yang bertanya sama ada boleh memilih elemen dengan atribut sebarang nilai. Bayangkan kod HTML berikut:

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

Matlamatnya adalah untuk menyasarkan yang pertama dan ketiga; tag dengan teks merah menggunakan CSS. Secara intuitif, kami mungkin mencuba:

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

Walau bagaimanapun, pemilih ini tidak akan berfungsi. Nasib baik, kami mempunyai penyelesaian alternatif.

Pemilih Atribut Universal

Pemilih atribut universal CSS, yang dilambangkan dengan kurungan segi empat sama tunggal ([ ]), memadankan mana-mana elemen dengan set atribut yang ditentukan, tanpa mengira nilainya. Untuk tujuan kami, kami boleh menggunakan:

a[rel]
{
  color: red;
}

Pemilih ini akan berjaya menyasarkan semua tag dengan atribut rel, menggunakan warna merah pada teks yang diingini.

Mengendalikan Nilai Atribut Kosong

Dalam sesetengah kes, kita mungkin perlu membezakan antara nilai atribut kosong dan tidak kosong. Di sinilah :not() pseudo-class berguna. Dengan :not(), kita boleh mengecualikan elemen dengan nilai atribut kosong, yang membawa kepada penyasaran yang lebih tepat.

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

Pemilih dipertingkat ini memastikan bahawa hanya teg dengan atribut rel bukan kosong akan dipengaruhi oleh perubahan gaya kami.

Jadi, begitulah. Pemilihan atribut universal CSS membolehkan anda dengan mudah menyasarkan elemen dengan mana-mana atribut yang ditentukan, menjadikan gaya anda lebih serba boleh dan boleh disesuaikan.

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