Bagaimanakah pemilih atribut CSS `a[href^='...']` menyasarkan elemen utama tertentu?

Pemilih Atribut CSS: Memahami Peranan a[href^="..."]

Dalam bidang pembangunan web, CSS memainkan peranan penting dalam menggayakan halaman web. Pemilih atribut ialah alat berkuasa dalam CSS yang membolehkan pembangun menyasarkan elemen tertentu berdasarkan atribut mereka. Salah satu pemilih atribut tersebut ialah a[href^="..."].

Pertimbangkan kod CSS berikut:

a[href^="http:"] {
  background: url(img/keys.gif) no-repeat right top;
}
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
  background-image: none; padding-right: 0;
}

Memahami a[href^=".. ."]

Pemilih a[href^="..."] menyasarkan semua sauh elemen yang nilai atribut hrefnya bermula dengan rentetan yang ditentukan dalam petikan. Dalam kes ini, ia menyasarkan elemen dengan nilai href yang bermula dengan "http:".

Contoh Penggunaan

Sebagai contoh, katakan anda mempunyai kod HTML berikut:

<a href="https://www.php.cn/link/2ca1ce4a65bf5b60c60bd7c4a89a33f9">Google</a>
<a href="https://www.php.cn/link/9d70ada63ee39c2f16e678bbf698df46">YouTube</a>
<a href="/about-us">About Us</a>

Menggunakan kod CSS di atas pada HTML ini akan menggayakan dua pautan pertama ( dan ) dengan hijau latar belakang dan imej di bahagian atas sebelah kanan. Pautan ketiga tidak akan terjejas.

Nota Tambahan

Aksara ^ dalam pemilih menandakan permulaan nilai. Operator lain yang boleh digunakan dalam pemilih atribut termasuk:

• $=: Diakhiri dengan
• *=: Mengandungi
• |=: Padanan tepat (hanya berfungsi dengan kelas dan id atribut)

Kesimpulan

Dengan memahami peranan a[href^="..."] dalam CSS, anda boleh menyasarkan dan menggayakan yang khusus dengan berkesan elemen utama berdasarkan atribut href mereka. Fleksibiliti ini meningkatkan kawalan dan ketepatan reka bentuk halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah pemilih atribut CSS `a[href^='...']` menyasarkan elemen utama tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!