Bagaimanakah saya boleh Menggayakan Elemen Sauh Berdasarkan Nilai Atribut hrefnya?

Patricia Arquette
Lepaskan: 2024-11-13 05:07:01
asal
522 orang telah melayarinya

How can I Style Anchor Elements Based on Their href Attribute Values?

Menggayakan Elemen Sauh dengan Atribut href

CSS menyediakan set pemilih yang komprehensif untuk menggunakan gaya pada elemen tertentu berdasarkan ciri-cirinya. Salah satu pemilih tersebut ialah pemilih atribut, yang membolehkan pembangun menyasarkan elemen berdasarkan nilai atribut mereka.

Pertimbangkan gaya CSS berikut:

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

Pemilih ini menyasarkan semua < a> elemen anchor yang nilai atribut hrefnya bermula dengan "http:". Ini bermakna ia akan menggunakan imej latar belakang, kedudukan dan saiz yang ditakrifkan dalam gaya kepada semua pautan yang menghala ke domain luaran.

Dalam contoh yang disediakan, pemilih:

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"]
Salin selepas log masuk

akan memilih semua pautan menghala ke halaman pada domain mysite.com dan mengalih keluar imej latar belakang. Ia juga akan menetapkan pelapik sebelah kanan kepada sifar untuk pautan ini.

Untuk memahami pemilih atribut, mari kita pecahkan sintaksnya:

Gaya CSS ini memberikan kawalan terperinci ke atas penggayaan pautan berdasarkan domain destinasinya. Dengan menggunakan pemilih atribut href, pembangun boleh mencipta gaya pautan yang lebih canggih yang meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Menggayakan Elemen Sauh Berdasarkan Nilai Atribut hrefnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan