Bagaimanakah Pemilih CSS seperti `a[href^='...']` Menyasarkan Elemen Sauh Khusus?

Mentafsir Pemilih CSS: Memahami [href^="..."]

Pemilih CSS memberikan kawalan tepat ke atas elemen HTML dengan menentukan kriteria yang mesti mereka penuhi. Satu pemilih sedemikian ialah a[href^="..."], yang menyasarkan elemen utama () berdasarkan kehadiran rentetan tertentu pada permulaan nilai atribut hrefnya.

Pertimbangkan kod CSS berikut:

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

Pemilih ini sepadan dengan semua elemen utama yang nilai atributnya href bermula dengan "http:". Akibatnya, sebarang pautan dalam dokumen HTML anda dengan atribut href bermula dengan "http:" akan menggunakan penggayaan yang ditentukan, seperti imej latar belakang.

Untuk menggambarkan dengan lebih lanjut, katakan anda mempunyai kod HTML berikut:

<a href="http://example.com">Example Website</a>
<a href="https://anothersite.net">Another Site</a>

Menggunakan kod CSS yang disebutkan di atas hanya akan menjejaskan pautan pertama, kerana atribut hrefnya sepadan dengan kriteria pemilih (`href^="http:"). Imej latar belakang akan menghiasi pautan ini, manakala pautan kedua kekal tidak terjejas.

Ini satu lagi contoh:

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

Pemilih ini menyasarkan elemen utama dengan nilai atribut href yang bermula dengan sama ada "http: //mysite.com" atau "http://www.mysite.com". Mana-mana pautan dalam kod HTML anda yang sepadan dengan corak ini akan dialih keluar imej latar belakangnya dan pelapik kanannya ditetapkan kepada sifar.

Atas ialah kandungan terperinci Bagaimanakah Pemilih CSS seperti `a[href^='...']` Menyasarkan Elemen Sauh Khusus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!